@seeqdev/qomponents 0.0.15 → 0.0.16

package/dist/Button/Button.stories.d.ts

@@ -5,3 +5,4 @@ export default _default;
 export declare const AllButtonVariants: () => JSX.Element;
 export declare const ButtonWithTooltip: () => JSX.Element;
 export declare const ButtonWithIcon: () => JSX.Element;
+export declare const DisabledButton: () => JSX.Element;

package/dist/Button/Button.types.d.ts

@@ -36,4 +36,6 @@ export interface ButtonProps {
     tooltip?: string;
     /** options for the tooltip */
     tooltipOptions?: Omit<TooltipProps, 'text'>;
+    /** if provided, determines whether to prevent the blur event from occurring onMouseDown*/
+    preventBlur?: boolean;
 }

package/dist/example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@seeqdev/qomponents": "latest",
+    "@seeqdev/qomponents": "0.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/index.esm.js

@@ -114,13 +114,13 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
  *  - use "variant" to achieve the desired style
  *  - include tooltips and/or icons
  */
-const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, }) => {
     const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
     const baseClassesByVariant = {
         'outline': 'tw-border-solid tw-border',
-        'theme': 'disabled:tw-bg-opacity-50',
-        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
-        'theme-light': 'disabled:tw-bg-opacity-50',
+        'theme': 'disabled:tw-opacity-50',
+        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50',
+        'theme-light': 'disabled:tw-opacity-50',
         'no-border': '',
         'warning': 'tw-bg-sq-warning-color',
     };
@@ -167,9 +167,12 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     const button = (React__default.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
             stopPropagation && e.stopPropagation();
             onClick && onClick();
+        }, onMouseDown: (e) => {
+            if (preventBlur) {
+                e.preventDefault();
+            }
         }, className: appliedClasses },
-        icon && (React__default.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ?
-                `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
+        icon && (React__default.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
         label));
     return tooltip ? (React__default.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
 };