@q2devel/q2-storybook 1.0.184 → 1.0.186

package/dist/components/Base/modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 interface ModalProps {
     title?: ReactNode;
+    titleClassName?: string;
     description: ReactNode;
     descriptionClassName?: string;
     buttonText?: ReactNode;
@@ -21,5 +22,5 @@ interface ModalProps {
     closeButtonClassName?: string;
     className?: string;
 }
-export declare const Modal: ({ title, description, descriptionClassName, buttonText, showIcon, icon, iconBackgroundColor, iconColor, buttonClassName, secondButtonText, secondButtonClassName, onSecondButtonClick, showSecondButton, panelClassName, backdropClassName, onClose, isOpen, showCloseButton, closeButtonClassName, className, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ title, titleClassName, description, descriptionClassName, buttonText, showIcon, icon, iconBackgroundColor, iconColor, buttonClassName, secondButtonText, secondButtonClassName, onSecondButtonClick, showSecondButton, panelClassName, backdropClassName, onClose, isOpen, showCloseButton, closeButtonClassName, className, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/dist/components/Base/modal/Modal.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, } from '@headlessui/react';
 import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { buildClassesByJoining } from '../../../utils/StyleHelper';
-export const Modal = ({ title, description, descriptionClassName, buttonText, showIcon = true, icon = _jsx(CheckIcon, { "aria-hidden": "true", className: "size-6" }), iconBackgroundColor = 'bg-green-100', iconColor = 'text-green-600', buttonClassName, secondButtonText, secondButtonClassName, onSecondButtonClick, showSecondButton = false, panelClassName, backdropClassName, onClose, isOpen, showCloseButton = false, closeButtonClassName, className, }) => {
+export const Modal = ({ title, titleClassName, description, descriptionClassName, buttonText, showIcon = true, icon = _jsx(CheckIcon, { "aria-hidden": "true", className: "size-6" }), iconBackgroundColor = 'bg-green-100', iconColor = 'text-green-600', buttonClassName, secondButtonText, secondButtonClassName, onSecondButtonClick, showSecondButton = false, panelClassName, backdropClassName, onClose, isOpen, showCloseButton = false, closeButtonClassName, className, }) => {
     const handleClose = (value) => {
         onClose?.();
     };
-    return (_jsxs(Dialog, { open: isOpen, onClose: handleClose, className: buildClassesByJoining('relative z-10', className), children: [_jsx(DialogBackdrop, { transition: true, className: buildClassesByJoining('fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in', backdropClassName) }), _jsx("div", { className: "fixed inset-0 z-10 w-screen overflow-y-auto", children: _jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: _jsxs(DialogPanel, { transition: true, className: buildClassesByJoining('relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-sm sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95', panelClassName), children: [showCloseButton && (_jsxs("button", { type: "button", className: buildClassesByJoining('absolute top-4 right-4 text-gray-400 hover:text-gray-500 focus:outline-none', closeButtonClassName), onClick: () => onClose?.(), children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(XMarkIcon, { className: "h-6 w-6", "aria-hidden": "true" })] })), _jsxs("div", { children: [showIcon && (_jsx("div", { className: buildClassesByJoining('mx-auto flex size-12 items-center justify-center rounded-full', iconBackgroundColor), children: _jsx("div", { className: iconColor, children: icon }) })), _jsxs("div", { className: "mt-3 text-center sm:mt-5", children: [title && (_jsx(DialogTitle, { as: "h3", className: "text-base font-semibold text-gray-900", children: title })), _jsx("div", { className: buildClassesByJoining('mt-2', descriptionClassName), children: description })] })] }), (buttonText ||
+    return (_jsxs(Dialog, { open: isOpen, onClose: handleClose, className: buildClassesByJoining('relative z-10', className), children: [_jsx(DialogBackdrop, { transition: true, className: buildClassesByJoining('fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in', backdropClassName) }), _jsx("div", { className: "fixed inset-0 z-10 w-screen overflow-y-auto", children: _jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: _jsxs(DialogPanel, { transition: true, className: buildClassesByJoining('relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-sm sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95', panelClassName), children: [showCloseButton && (_jsxs("button", { type: "button", className: buildClassesByJoining('absolute top-4 right-4 text-gray-400 hover:text-gray-500 focus:outline-none', closeButtonClassName), onClick: () => onClose?.(), children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(XMarkIcon, { className: "h-6 w-6", "aria-hidden": "true" })] })), _jsxs("div", { children: [showIcon && (_jsx("div", { className: buildClassesByJoining('mx-auto flex size-12 items-center justify-center rounded-full', iconBackgroundColor), children: _jsx("div", { className: iconColor, children: icon }) })), _jsxs("div", { className: "mt-3 text-center sm:mt-5", children: [title && (_jsx(DialogTitle, { as: "h3", className: buildClassesByJoining('text-base font-semibold text-gray-900', titleClassName), children: title })), _jsx("div", { className: buildClassesByJoining('mt-2', descriptionClassName), children: description })] })] }), (buttonText ||
                                 (showSecondButton && secondButtonText)) && (_jsxs("div", { className: "mt-5 sm:mt-6 space-y-3", children: [buttonText && (_jsx("button", { type: "button", onClick: () => onClose?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', buttonClassName), children: buttonText })), showSecondButton && secondButtonText && (_jsx("button", { type: "button", onClick: () => onSecondButtonClick?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', secondButtonClassName), children: secondButtonText }))] }))] }) }) })] }));
 };
 export default Modal;

package/dist/components/Ecommerce/basket-dialog/BasketDialog.d.ts

@@ -55,6 +55,7 @@ export type BasketDialogProps = {
         spinner?: string;
         heading?: string;
         price?: string;
+        totalText?: string;
         amount?: string;
         addingIndicator?: string;
         addingIndicatorText?: string;

package/dist/components/Ecommerce/basket-dialog/BasketDialog.js

@@ -87,5 +87,5 @@ export const BasketDialog = ({ isOpen, onClose, products, subtotal, onQuantityCh
                                                                                                     onRemoveProduct(product.variation_uuid), disabled: isProcessing, children: translations.remove }) }))] })] })] }, `${product.variation_uuid}-${isTemporaryRow
                                                                     ? 'temp'
                                                                     : 'normal'}`));
-                                                            }), shouldShowAddingIndicator && (_jsxs("li", { className: buildClassesByJoining('flex py-6 opacity-75 bg-gray-50', classNames?.addingIndicator), children: [_jsx("div", { className: "size-24 shrink-0 overflow-hidden rounded-md border border-gray-200 relative", children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white bg-opacity-75", children: _jsx(Spinner, { className: buildClassesByJoining('h-8 w-8 text-[var(--primary)]', classNames?.spinner) }) }) }), _jsx("div", { className: "ml-4 flex flex-1 flex-col justify-center", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: buildClassesByJoining('h-4 w-4 text-[var(--primary)]', classNames?.spinner) }), _jsx("p", { className: buildClassesByJoining('text-gray-500 italic', classNames?.addingIndicatorText), children: translations.addingToBasket })] }) })] }))] })) }) })] }), _jsxs("div", { className: buildClassesByJoining('border-t border-gray-200 px-4 py-6 sm:px-6', classNames?.total), children: [_jsxs("div", { className: "flex justify-between text-base font-medium text-gray-900", children: [_jsx("p", { children: translations.total }), _jsx(Price, { value: subtotal, locale: locale, options: totalPriceOptions })] }), showShippingNote && (_jsx("p", { className: buildClassesByJoining('mt-0.5 text-sm text-gray-500', classNames?.shippingAndTax), children: translations.shippingAndTax })), products.length > 0 && onCheckout && (_jsx("div", { className: buildClassesByJoining('mt-6', classNames?.checkoutButton), children: _jsx("button", { onClick: handleCheckout, className: buildClassesByJoining(checkoutTextClass, classNames?.checkoutButton), children: checkoutText }) })), _jsx("div", { className: buildClassesByJoining('mt-6 flex justify-center text-center text-sm text-gray-500', classNames?.continueShoppingButton), children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: handleContinueShopping, className: buildClassesByJoining('font-medium text-[var(--primary)] hover:text-[var(--primary)]', classNames?.continueShoppingButton), children: [continueShoppingText, _jsxs("span", { "aria-hidden": "true", children: [' ', "\u2192"] })] }) }) })] })] }) }) }) }) })] }));
+                                                            }), shouldShowAddingIndicator && (_jsxs("li", { className: buildClassesByJoining('flex py-6 opacity-75 bg-gray-50', classNames?.addingIndicator), children: [_jsx("div", { className: "size-24 shrink-0 overflow-hidden rounded-md border border-gray-200 relative", children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white bg-opacity-75", children: _jsx(Spinner, { className: buildClassesByJoining('h-8 w-8 text-[var(--primary)]', classNames?.spinner) }) }) }), _jsx("div", { className: "ml-4 flex flex-1 flex-col justify-center", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Spinner, { className: buildClassesByJoining('h-4 w-4 text-[var(--primary)]', classNames?.spinner) }), _jsx("p", { className: buildClassesByJoining('text-gray-500 italic', classNames?.addingIndicatorText), children: translations.addingToBasket })] }) })] }))] })) }) })] }), _jsxs("div", { className: buildClassesByJoining('border-t border-gray-200 px-4 py-6 sm:px-6', classNames?.total), children: [_jsxs("div", { className: buildClassesByJoining('flex justify-between text-base font-medium text-gray-900', classNames?.totalText), children: [_jsx("p", { children: translations.total }), _jsx(Price, { value: subtotal, locale: locale, options: totalPriceOptions })] }), showShippingNote && (_jsx("p", { className: buildClassesByJoining('mt-0.5 text-sm text-gray-500', classNames?.shippingAndTax), children: translations.shippingAndTax })), products.length > 0 && onCheckout && (_jsx("div", { className: buildClassesByJoining('mt-6', classNames?.checkoutButton), children: _jsx("button", { onClick: handleCheckout, className: buildClassesByJoining(checkoutTextClass, classNames?.checkoutButton), children: checkoutText }) })), _jsx("div", { className: buildClassesByJoining('mt-6 flex justify-center text-center text-sm text-gray-500', classNames?.continueShoppingButton), children: _jsx("p", { children: _jsxs("button", { type: "button", onClick: handleContinueShopping, className: buildClassesByJoining('font-medium text-[var(--primary)] hover:text-[var(--primary)]', classNames?.continueShoppingButton), children: [continueShoppingText, _jsxs("span", { "aria-hidden": "true", children: [' ', "\u2192"] })] }) }) })] })] }) }) }) }) })] }));
 };

package/dist/components/Forms/select-field/SelectField.d.ts

@@ -24,6 +24,7 @@ export type SelectFieldProps<Option, Group extends GroupBase<Option> = GroupBase
     connected?: boolean;
     connectPosition?: 'left' | 'right' | 'middle' | 'none';
     rounded?: boolean;
+    selectClassName?: string;
 };
 export type SelectFieldRefType<Option, Group extends GroupBase<Option>, IsMulti extends boolean = false> = SelectInstance<Option, IsMulti, Group>;
 declare const SelectField: <Option = unknown, Group extends GroupBase<Option> = GroupBase<Option>, IsMulti extends boolean = false>(props: SelectFieldProps<Option, Group, IsMulti> & React.RefAttributes<SelectFieldRefType<Option, Group, IsMulti>>) => React.JSX.Element;

package/dist/components/Forms/select-field/SelectField.js

@@ -8,7 +8,7 @@ import { CloseIcon } from '../../icon/CloseIcon';
 import { InfoIcon } from '../../icon/InfoIcon';
 import Label from '../../label/Label';
 import SelectFieldOption from './SelectFieldOption';
-function SelectFieldComponent({ id, label, isRequired, srOnlyLabel, selectFieldType = 'default', subtitle, size = 'md', color = 'primary', valid = true, className, message, placeholder = selectFieldType === 'table' ? '...' : '', isSearchable = false, removePaddingTop, menuPosition = 'fixed', renderMessageInTooltip, tooltipRef, disablePortal, tooltipMessage, isMulti, typeSelect = isMulti ? 'multi' : 'single', badgeLabelClassName, styles: customStyles, connected, connectPosition, rounded = true, ...props }, ref) {
+function SelectFieldComponent({ id, label, isRequired, srOnlyLabel, selectFieldType = 'default', subtitle, size = 'md', color = 'primary', valid = true, className, message, placeholder = selectFieldType === 'table' ? '...' : '', isSearchable = false, removePaddingTop, menuPosition = 'fixed', renderMessageInTooltip, tooltipRef, disablePortal, tooltipMessage, isMulti, typeSelect = isMulti ? 'multi' : 'single', badgeLabelClassName, styles: customStyles, connected, connectPosition, rounded = true, selectClassName, ...props }, ref) {
     const randomId = useId();
     const isMultiSelect = typeSelect === 'multi';
     const renderMessage = () => {
@@ -126,7 +126,7 @@ function SelectFieldComponent({ id, label, isRequired, srOnlyLabel, selectFieldT
         isSearchable,
         className: buildClassesByJoining({
             [size]: true,
-        }, 'selector-container'),
+        }, 'selector-container', selectClassName),
         menuPortalTarget: typeof document !== 'undefined' &&
             menuPosition === 'fixed' &&
             !disablePortal

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@q2devel/q2-storybook",
-    "version": "1.0.184",
+    "version": "1.0.186",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",