@seeqdev/qomponents 0.0.82 → 0.0.84

package/dist/TextField/TextField.types.d.ts

@@ -3,6 +3,9 @@ export interface TextFieldProps {
     readonly?: boolean;
     onChange?: React.ChangeEventHandler<FormControlElement>;
     onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
+    onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<FormControlElement>;
     id?: string;
     name?: string;
     size?: 'sm' | 'lg';
@@ -14,7 +17,9 @@ export interface TextFieldProps {
     ref?: any;
     inputGroup?: InputGroupPlacement;
     step?: number | string;
-    /** if true error formatting will be displayed */
     showError?: boolean;
+    errorText?: string;
     required?: boolean;
+    autoComplete?: string;
+    autoFocus?: boolean;
 }

package/dist/ToolbarButton/ToolbarButton.types.d.ts

@@ -39,4 +39,14 @@ export interface ToolbarButtonProps {
     onHide?: () => void;
     /** set to display arrow or not */
     hasArrow?: boolean;
+    /** true if the `icon` string is an svg */
+    isPrimaryAnSvg?: boolean;
+    /** extra class names to be placed on the primary icon */
+    primaryIconExtraClassNames?: string;
+    /** height for the icon */
+    iconHeight?: number;
+    /** width for the icon */
+    iconWidth?: number;
+    /** viewbox for the icon */
+    primaryIconViewbox?: string;
 }

package/dist/index.esm.js

@@ -4561,6 +4561,26 @@ const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679
 const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
 const $cb5cc270b50c6fcd$export$21b07c8f274aebd5 = $cb5cc270b50c6fcd$export$3152841115e061b2;
 
+const SVG_PATH = 'svgpath:';
+/**
+ * Determines if an icon is SVG
+ *
+ * @param icon - an icon string that will either be an icon class or an SVG path definition (e.g. "fa fa-wrench" or
+ * "svgpath:M 17.0181 0 ...")
+ */
+function isSvgIcon(icon) {
+    return icon.startsWith(SVG_PATH);
+}
+/**
+ * Retrieves the SVG path from an SVG icon
+ *
+ * @param icon - an SVG icon string including path definition (e.g. "svgpath:M 17.0181 0 ...")
+ * @returns the SVG icon path or an empty string if the supplied icon is not SVG
+ */
+function getSvgIconPath(icon) {
+    return isSvgIcon(icon) ? icon.substring(SVG_PATH.length) : '';
+}
+
 const borderStyles$4 = [
     'tw-border-solid',
     'tw-border',
@@ -4594,7 +4614,7 @@ const activeBorderStyles = [
 const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
 const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
-const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, onClick, onHide, }) => {
+const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, isPrimaryAnSvg = false, primaryIconExtraClassNames = false, iconHeight = 24, iconWidth = 24, primaryIconViewbox = '0 0 24 24', onClick, onHide, }) => {
     let tooltipData = undefined;
     if (tooltipText) {
         tooltipData = {
@@ -4614,9 +4634,10 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
         React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
                 onClick && onClick(e);
             } },
-            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[3px]'} ${disabled ? disabledClasses$4 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
+            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[5px]'} ${disabled ? disabledClasses$4 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
                 React.createElement("span", { className: "tw-nowrap" },
-                    React.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` }),
+                    isPrimaryAnSvg ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-text-sq-text-color dark:tw-text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId },
+                        React.createElement("path", { d: getSvgIconPath(icon) }))) : (React.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` })),
                     secondIcon && React.createElement(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }),
                     popoverContent ? (React.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[8px]", type: "text" })) : undefined),
                 !isSmall && (React.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[10px]" }, label)))),
@@ -4653,7 +4674,7 @@ const sizeClasses = {
  * Textfield.
  */
 const TextField = React__default.forwardRef((props, ref) => {
-    const { readonly = false, onChange, onKeyUp, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, required = false, } = props;
+    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, required = false, autoComplete = 'off' } = props;
     const internalRef = useRef(null);
     const [cursor, setCursor] = useState(null);
     const setAllRefs = (receivedRef) => {
@@ -4689,7 +4710,9 @@ const TextField = React__default.forwardRef((props, ref) => {
         borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
     }
     const appliedClasses = `${baseClasses$3} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$1} ${darkTheme$1} ${borderRadius} ${showError ? errorClasses$2 : borderColorClasses$2} `;
-    return (React__default.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: "none", onChange: handleChange, onKeyUp: onKeyUp, step: step, required: required }));
+    return (React__default.createElement("div", { className: "tw-w-full" },
+        React__default.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required }),
+        errorText && showError && React__default.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
 });
 
 const alignment = 'tw-flex';