@seeqdev/qomponents 0.0.59 → 0.0.61

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts

@@ -32,8 +32,8 @@ export interface ButtonWithDropdownProps {
     id?: string;
     /** extra class names to be placed on the dropdown container */
     extraClassNames?: string;
-    /** id that will be used in the data-testid attribute on the trigger element */
-    testId?: string;
+    /** id that will be used in the data-testid attribute on the container element */
+    containerTestId?: string;
     /** the text to be displayed on the triggers's tooltip */
     tooltipText?: string;
     /** optional testId applied to the tooltip - useful for testing */
@@ -62,5 +62,9 @@ export interface ButtonWithDropdownProps {
     isOpen?: boolean;
     /** function called to open and close popover */
     onOpenChange?: (isOpen: boolean) => void;
+    /** should popover close when the content is clicked? */
+    isCloseOnContentClick?: boolean;
+    /** focus should be kept within dropdown */
+    keepFocusInsideDropdown?: boolean;
 }
 export {};

package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts

@@ -8,8 +8,8 @@ export interface ButtonWithPopoverProps {
     id?: string;
     /** extra class names to be placed on the Popover container component */
     extraClassNames?: string;
-    /** id that will be used in the data-testid attribute on the button element */
-    testId?: string;
+    /** id that will be used in the data-testid attribute on the container element */
+    containerTestId?: string;
     /** the text to be displayed on the icon's tooltip */
     tooltipText?: string;
     /** optional testId applied to the tooltip - useful for testing */

package/dist/index.esm.js

@@ -14996,11 +14996,11 @@ const borderStyles$1 = [
     'tw-border-solid',
     'tw-border',
     'tw-rounded-sm',
-    'tw-border-sq-light-gray',
+    'tw-border-sq-disabled-gray',
     'dark:tw-border-gray-700',
 ].join(' ');
 const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, testId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', alignOffset = -5, placement = 'bottom', placementOffset = 2, onOpenChange, isOpen, isHtmlTooltip = false, isCloseOnContentClick = false, }) => {
+const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', alignOffset = -5, placement = 'bottom', placementOffset = 2, onOpenChange, isOpen, isHtmlTooltip = false, isCloseOnContentClick = false, }) => {
     let tooltipData = undefined;
     if (tooltipText) {
         tooltipData = {
@@ -15012,14 +15012,14 @@ const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extra
         };
     }
     return (React.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: isOpen, defaultOpen: false, onOpenChange: onOpenChange },
-        React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled, "data-testid": testId },
+        React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled },
             React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center tw-justify-center ${disabled ? disabledClasses$1 : ''} ${extraTriggerClassNames || ''}` }, trigger)),
         React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, alignOffset: alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none" },
-            React.createElement("div", { className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+            React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
              data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade
             ${extraPopoverClassNames || ''}` },
                 hasArrow && (React.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
-                    React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45  dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-light-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
+                    React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45  dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
                 children))));
 };
 
@@ -15714,12 +15714,12 @@ const borderStyles = [
     'tw-border-solid',
     'tw-border',
     'tw-rounded-sm',
-    'tw-border-sq-light-gray',
+    'tw-border-sq-disabled-gray',
     'dark:tw-border-gray-700',
 ].join(' ');
 const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extraClassNames, testId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', placement = 'bottom', placementOffset = 2, alignOffset = -5, hasArrow = false, onOpenChange, isHtmlTooltip = false, isOpen, }) => {
+const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extraClassNames, containerTestId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', placement = 'bottom', placementOffset = 2, alignOffset = -5, hasArrow = false, onOpenChange, isHtmlTooltip = false, isOpen, keepFocusInsideDropdown = true, }) => {
     let tooltipData = undefined;
     if (tooltipText) {
         tooltipData = {
@@ -15730,23 +15730,23 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extra
             'data-qtip-delay': tooltipDelay ?? DEFAULT_TOOL_TIP_DELAY,
         };
     }
-    return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange },
-        React.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled, "data-testid": testId },
+    return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
+        React.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
             React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}` }, triggerIcon)),
         React.createElement($d08ef79370b62062$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, className: "focus-visible:tw-outline-none tw-outline-none" },
-            React.createElement("div", { className: bgStyles +
+            React.createElement("div", { "data-testid": containerTestId, className: bgStyles +
                     ' tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
                     ' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
                     borderStyles },
                 hasArrow && (React.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
-                    React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45  dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-light-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
+                    React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45  dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
                 dropdownItems.map((item, index) => (React.createElement("div", { key: item.label + index },
                     React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, onSelect: (e) => {
                             item.onClick(e);
                         }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-colored-hover hover:dark:tw-bg-sq-colored-hover-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
                         item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
                         React.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-ml-1" }, item.label)),
-                    item.hasDivider && (React.createElement($d08ef79370b62062$export$1ff3c3f08ae963c0, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-light-gray dark:tw-bg-gray-700 tw-my-[8px]" })))))))));
+                    item.hasDivider && (React.createElement($d08ef79370b62062$export$1ff3c3f08ae963c0, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-700 tw-my-[8px]" })))))))));
 };
 
 export { Accordion, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, Modal, QTip, Select, Tabs, TextArea, TextField, ToolbarButton, Tooltip };