@seeqdev/qomponents 0.0.191 → 0.0.193

package/README.md

@@ -8,7 +8,7 @@ Seeq qomponents are a collection of UI components, including a Button, a TextFie
 React component (more coming soon!)
 
 These components are used by Seeq's application and are made publicly available for Developers who want to expand
-the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
+the Seeq ecosystem with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
 experience. Every component comes fully styled (and with dark mode support).
 
 ## Installation
@@ -29,8 +29,8 @@ yarn add @seeqdev/qomponents
 
 ## Getting started with Seeq qomponents
 
-Prefer a more complete example? <br/>Checkout the example folder provided.
-It includes a ready to run example application. Start with the readme in the example folder to get up and running!
+Prefer a more complete example? <br/>Check out the example folder provided.
+It includes a ready-to-run example application. Start with the readme in the example folder to get up and running!
 
 Here is an example of a basic app using the `Button` component:
 
@@ -49,8 +49,6 @@ To make sure all styles are properly applied be sure to include the qomponents c
 @import '@seeqdev/qomponents/dist/styles.css';
 ```
 
-**Note:** The styles.css file already includes the icon font definitions, so you don't need to manually add `@font-face` declarations.
-
 <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
 available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
 property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when

package/dist/index.esm.js

@@ -66,7 +66,7 @@ const colorClassesThemeDark = {
     'dark-gray': 'tw:text-sq-fairly-dark-gray',
     'warning': '',
     'darkish-gray': 'tw:text-sq-darkish-gray',
-    'gray': 'tw:dark:text-sq-dark-disabled-gray',
+    'gray': 'tw:dark:text-sq-fairly-dark-gray',
     'color': '',
     'info': 'tw:dark:text-sq-theme-link',
     'text': 'tw:dark:text-sq-dark-text',
@@ -134,7 +134,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
         'outline': 'tw:bg-white tw:border-sq-disabled-gray',
         'theme': 'tw:bg-sq-theme-dark tw:border-sq-theme-dark',
         'danger': '',
-        'theme-light': 'tw:bg-sq-icon',
+        'theme-light': 'tw:bg-sq-theme-icon',
         'no-border': '',
         'warning': '',
     };
@@ -142,7 +142,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
         'outline': 'tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-disabled-gray',
         'theme': 'tw:dark:bg-sq-theme-dark tw:dark:border-sq-theme-dark',
         'danger': '',
-        'theme-light': 'tw:dark:bg-sq-icon-dark tw:dark:border-sq-icon-dark',
+        'theme-light': 'tw:dark:bg-sq-theme-icon tw:dark:border-sq-theme-icon',
         'no-border': '',
         'warning': '',
     };
@@ -4946,7 +4946,7 @@ const sizeClasses = {
  * Textfield.
  */
 const TextField = React__default.forwardRef((props, ref) => {
-    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
+    const { readonly = false, disabled = false, onChange, onPaste, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
     const internalRef = useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const [cursor, setCursor] = useState(null);
@@ -4996,7 +4996,7 @@ const TextField = React__default.forwardRef((props, ref) => {
         inputLenghtProp.maxLength = maxLength;
     if (minLength)
         inputLenghtProp.minLength = minLength;
-    return (jsxs(Fragment, { children: [jsx$1("input", { ref: mergedRef, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
+    return (jsxs(Fragment, { children: [jsx$1("input", { ref: mergedRef, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onPaste: onPaste, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
 });
 
 const alignment = 'tw:flex';
@@ -5006,8 +5006,8 @@ const baseClasses$5 = 'tw:appearance-none tw:border tw:h-3.5 tw:w-3.5 tw:focus:r
     ' tw:checked:text-white tw:checked:border-sq-text-color tw:checked: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:form-checkbox tw:rounded ${baseClasses$5}`;
-const radioClasses = `tw:form-radio tw:rounded-full ${baseClasses$5}`;
+const checkboxClasses = `tw:rounded ${baseClasses$5}`;
+const radioClasses = `tw:rounded-full ${baseClasses$5}`;
 /**
  * Checkbox and Radio Box Component.
  */
@@ -14567,7 +14567,7 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 const Dialog = Root$4;
 const DialogPortal = Portal$1;
 const DialogClose = Close;
-const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw:select-none tw:fixed tw:w-full tw:h-full tw:opacity-50 tw:inset-0 tw:z-[1009] tw:bg-sq-dark-background\n    tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0\n    tw:data-[state=open]:fade-in-0 " }), jsxs(Content$2, { ref: ref, className: `tw:fixed tw:left-[50%] tw:top-0 tw:my-6 tw:translate-x-[-50%] tw:z-[1010] tw:grid
+const DialogContent = React__default.forwardRef(({ className, 'aria-describedby': ariaDescribedBy, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw:select-none tw:fixed tw:w-full tw:h-full tw:opacity-50 tw:inset-0 tw:z-[1009] tw:bg-sq-dark-background\n    tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0\n    tw:data-[state=open]:fade-in-0 " }), jsxs(Content$2, { ref: ref, "aria-describedby": ariaDescribedBy, className: `tw:fixed tw:left-[50%] tw:top-0 tw:my-6 tw:translate-x-[-50%] tw:z-[1010] tw:grid
        tw:gap-4 tw:border tw:bg-sq-white tw:dark:bg-sq-dark-background tw:shadow-lg tw:duration-200
        tw:rounded-lg ${className}`, ...props, children: [jsx$1(DialogTitle$1, { className: "tw:hidden" }), children] })] })));
 DialogContent.displayName = Content$2.displayName;
@@ -14579,7 +14579,7 @@ const DialogTitle = React__default.forwardRef((props, ref) => jsx$1(Title, { ref
 DialogTitle.displayName = Title.displayName;
 const DialogDescription = React__default.forwardRef((props, ref) => jsx$1(Description, { 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 = jsx$1(Fragment, {}), customButtonVariant = 'outline', submitButtonVariant = 'theme', keepFocusInsideModal = true, onPointerDownOutside, onInteractOutside, }) => {
+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 = jsx$1(Fragment, {}), customButtonVariant = 'outline', submitButtonVariant = 'theme', keepFocusInsideModal = true, onPointerDownOutside, onInteractOutside, ariaDescribedBy, }) => {
     const [isLoading, setIsLoading] = useState(false);
     // the Dialog is adding pointerEvents: none to body and the dropdowns from the modal does not work anymore
     useEffect(() => {
@@ -14617,7 +14617,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
         }
         return (jsxs(Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsx$1("div", { className: "tw:flex tw:mr-2", children: titleIconElement }) : jsx$1(Fragment, {}), jsx$1(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxs("div", { className: "tw:flex tw:w-full tw:items-center", children: [jsx$1(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsx$1("p", { className: "tw:text-sq-danger tw:min-w-fit tw:pl-2 tw:mb-0", children: titleError })] })) : (customHeader ?? (jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxs("div", { className: "tw:flex tw:items-center", children: [jsx$1("h3", { children: title }), titleSuffixLabel && jsx$1("span", { className: "tw:text-xl tw:pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsx$1("div", { className: "tw:italic tw:text-sm tw:text-left tw:mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsx$1("div", { className: "tw:flex tw:ml-4", children: titleIconElement }) : jsx$1(Fragment, {})] }));
     };
-    return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw:w-full tw:border-none tw:shadow-none tw:dark:text-sq-dark-text tw:gap-0!`, {
+    return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, "aria-describedby": ariaDescribedBy, className: classNames(`modalContent tw:w-full tw:border-none tw:shadow-none tw:dark:text-sq-dark-text tw:gap-0!`, {
                 'tw:max-w-xs': size === 'xs',
                 'tw:max-w-sm': size === 'sm',
                 'tw:max-w-md': size === 'md',
@@ -16685,7 +16685,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
         theme: `${lightTheme$1} ${darkTheme$1}`,
         formulaError: 'tw:text-red-800 tw:bg-red-200 tw:rounded-[0.25rem]!',
         danger: 'tw:text-sq-text-color tw:bg-sq-danger',
-        warning: 'tw:bg-sq-bg-warning tw:text-sq-text-color',
+        warning: 'tw:bg-sq-bg-warning tw:text-sq-text-color tw:dark:text-sq-multi-gray-dark',
         gray: 'tw:bg-sq-hover-gray tw:text-sq-text-color tw:dark:bg-sq-tools-background-dark tw:dark:text-sq-text-color-dark',
     };
     const appliedBorderTheme = {
@@ -16721,8 +16721,8 @@ const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, view
     const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none 
   tw:outline-none`;
     const tooltipData = getQTipData(tooltipProps);
-    const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
-    return (jsx$1("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsx$1("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:sq-icon tw:dark:text-sq-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsx$1("path", { d: getSvgIconPath(icon) }) }) }));
+    const appliedType = type === 'default' ? 'currentColor' : 'var(--theme-icon)';
+    return (jsx$1("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsx$1("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:text-sq-theme-icon tw:dark:text-sq-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsx$1("path", { d: getSvgIconPath(icon) }) }) }));
 };
 
 const SeeqActionDropdownItem = (item) => {
@@ -16860,8 +16860,7 @@ function formatErrorMessage(message, errorCode) {
 
 let warning = () => { };
 let invariant = () => { };
-if (typeof process !== "undefined" &&
-    process.env?.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== "production") {
     warning = (check, message, errorCode) => {
         if (!check && typeof console !== "undefined") {
             console.warn(formatErrorMessage(message, errorCode));
@@ -17317,17 +17316,6 @@ const isCSSVariableToken = (value) => {
     return singleCssVariableRegex.test(value.split("/*")[0].trim());
 };
 const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
-/**
- * Check if a value contains a CSS variable anywhere (e.g. inside calc()).
- * Unlike isCSSVariableToken which checks if the value IS a var() token,
- * this checks if the value CONTAINS var() somewhere in the string.
- */
-function containsCSSVariable(value) {
-    if (typeof value !== "string")
-        return false;
-    // Strip comments to avoid false positives
-    return value.split("/*")[0].includes("var(--");
-}
 
 const number = {
     test: (v) => typeof v === "number",
@@ -19125,12 +19113,6 @@ class NativeAnimation extends WithPromise {
         super();
         this.finishedTime = null;
         this.isStopped = false;
-        /**
-         * Tracks a manually-set start time that takes precedence over WAAPI's
-         * dynamic startTime. This is cleared when play() or time setter is called,
-         * allowing WAAPI to take over timing.
-         */
-        this.manualStartTime = null;
         if (!options)
             return;
         const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
@@ -19166,7 +19148,6 @@ class NativeAnimation extends WithPromise {
     play() {
         if (this.isStopped)
             return;
-        this.manualStartTime = null;
         this.animation.play();
         if (this.state === "finished") {
             this.updateFinished();
@@ -19230,7 +19211,6 @@ class NativeAnimation extends WithPromise {
         return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
     }
     set time(newTime) {
-        this.manualStartTime = null;
         this.finishedTime = null;
         this.animation.currentTime = secondsToMilliseconds(newTime);
     }
@@ -19253,10 +19233,10 @@ class NativeAnimation extends WithPromise {
             : this.animation.playState;
     }
     get startTime() {
-        return this.manualStartTime ?? Number(this.animation.startTime);
+        return Number(this.animation.startTime);
     }
     set startTime(newStartTime) {
-        this.manualStartTime = this.animation.startTime = newStartTime;
+        this.animation.startTime = newStartTime;
     }
     /**
      * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
@@ -19318,7 +19298,7 @@ class NativeAnimationExtended extends NativeAnimation {
          */
         replaceTransitionType(options);
         super(options);
-        if (options.startTime !== undefined) {
+        if (options.startTime) {
             this.startTime = options.startTime;
         }
         this.options = options;
@@ -19326,7 +19306,7 @@ class NativeAnimationExtended extends NativeAnimation {
     /**
      * WAAPI doesn't natively have any interruption capabilities.
      *
-     * Rather than read committed styles back out of the DOM, we can
+     * Rather than read commited styles back out of the DOM, we can
      * create a renderless JS animation and sample it twice to calculate
      * its current value, "previous" value, and therefore allow
      * Motion to calculate velocity for any subsequent animation.
@@ -19343,14 +19323,8 @@ class NativeAnimationExtended extends NativeAnimation {
             ...options,
             autoplay: false,
         });
-        /**
-         * Use wall-clock elapsed time for sampling.
-         * Under CPU load, WAAPI's currentTime may not reflect actual
-         * elapsed time, causing incorrect sampling and visual jumps.
-         */
-        const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
-        const delta = clamp$1(0, sampleDelta, sampleTime - sampleDelta);
-        motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, sampleAnimation.sample(sampleTime).value, delta);
+        const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
+        motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
         sampleAnimation.stop();
     }
 }
@@ -19528,7 +19502,7 @@ class AsyncMotionValueAnimation extends WithPromise {
          * progress, which would feel snappier.
          *
          * However, if there's a delay (main thread work) between the creation of
-         * the animation and the first committed frame, we prefer to use resolvedAt
+         * the animation and the first commited frame, we prefer to use resolvedAt
          * to avoid a sudden jump into the animation.
          */
         const startTime = sync
@@ -19797,36 +19771,17 @@ const numberValueTypes = {
     right: px,
     bottom: px,
     left: px,
-    inset: px,
-    insetBlock: px,
-    insetBlockStart: px,
-    insetBlockEnd: px,
-    insetInline: px,
-    insetInlineStart: px,
-    insetInlineEnd: px,
     // Spacing props
     padding: px,
     paddingTop: px,
     paddingRight: px,
     paddingBottom: px,
     paddingLeft: px,
-    paddingBlock: px,
-    paddingBlockStart: px,
-    paddingBlockEnd: px,
-    paddingInline: px,
-    paddingInlineStart: px,
-    paddingInlineEnd: px,
     margin: px,
     marginTop: px,
     marginRight: px,
     marginBottom: px,
     marginLeft: px,
-    marginBlock: px,
-    marginBlockStart: px,
-    marginBlockEnd: px,
-    marginInline: px,
-    marginInlineStart: px,
-    marginInlineEnd: px,
     // Misc
     backgroundPositionX: px,
     backgroundPositionY: px,
@@ -19944,16 +19899,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         const [origin, target] = unresolvedKeyframes;
         const originType = findDimensionValueType(origin);
         const targetType = findDimensionValueType(target);
-        /**
-         * If one keyframe contains embedded CSS variables (e.g. in calc()) and the other
-         * doesn't, we need to measure to convert to pixels. This handles GitHub issue #3410.
-         */
-        const originHasVar = containsCSSVariable(origin);
-        const targetHasVar = containsCSSVariable(target);
-        if (originHasVar !== targetHasVar && positionalValues[name]) {
-            this.needsMeasurement = true;
-            return;
-        }
         /**
          * Either we don't recognise these value types or we can animate between them.
          */
@@ -20488,24 +20433,16 @@ const isPrimaryPointer = (event) => {
     }
 };
 
-const interactiveElements = new Set([
+const focusableElements = new Set([
     "BUTTON",
     "INPUT",
     "SELECT",
     "TEXTAREA",
     "A",
 ]);
-/**
- * Checks if an element is an interactive form element that should prevent
- * drag gestures from starting when clicked.
- *
- * This specifically targets form controls, buttons, and links - not just any
- * element with tabIndex, since motion elements with tap handlers automatically
- * get tabIndex=0 for keyboard accessibility.
- */
 function isElementKeyboardAccessible(element) {
-    return (interactiveElements.has(element.tagName) ||
-        element.isContentEditable === true);
+    return (focusableElements.has(element.tagName) ||
+        element.tabIndex !== -1);
 }
 
 const isPressing = new WeakSet();