@seeqdev/qomponents 0.0.118 → 0.0.120

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import '../styles.css';
+import { ButtonGroupProps } from './ButtonGroup.types';
+/**
+ * ButtonGroup.
+ */
+export declare const ButtonGroup: React.FunctionComponent<ButtonGroupProps>;

package/dist/ButtonGroup/ButtonGroup.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllButtonGroups: () => JSX.Element;

package/dist/ButtonGroup/ButtonGroup.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/ButtonGroup/ButtonGroup.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { ButtonGroup } from './ButtonGroup';
+describe('ButtonGroup', () => {
+    const mockOnChange = jest.fn();
+    const defaultProps = {
+        id: 'test-id',
+        extraClassNames: 'extra-class',
+        value: 'button1',
+        testId: 'button-group',
+        onChange: mockOnChange,
+        buttons: [
+            {
+                variant: 'button',
+                buttonProps: {
+                    testId: 'button1',
+                    buttonValue: 'button1',
+                    variant: 'outline',
+                    extraClassNames: 'button-class',
+                },
+            },
+            {
+                variant: 'button',
+                buttonProps: {
+                    testId: 'button2',
+                    buttonValue: 'button2',
+                    variant: 'theme',
+                    extraClassNames: 'button-class',
+                },
+            },
+            {
+                variant: 'element',
+                element: React.createElement("span", null, "Custom Element"),
+            },
+        ],
+    };
+    it('renders ButtonGroup with buttons and custom elements', () => {
+        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
+        const buttonGroup = getByTestId('button-group');
+        expect(buttonGroup).toBeInTheDocument();
+        expect(buttonGroup).toHaveClass('tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap extra-class');
+        const button1 = getByTestId('button1');
+        expect(button1).toBeInTheDocument();
+        expect(button1).toHaveClass('button-class');
+        const button2 = getByTestId('button2');
+        expect(button2).toBeInTheDocument();
+        expect(button2).toHaveClass('button-class');
+    });
+    it('calls onChange when a button is clicked', () => {
+        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
+        const button1 = getByTestId('button1');
+        fireEvent.click(button1);
+        expect(mockOnChange).toHaveBeenCalledWith('button1');
+        const button2 = getByTestId('button2');
+        fireEvent.click(button2);
+        expect(mockOnChange).toHaveBeenCalledWith('button2');
+    });
+    it('applies active classes based on value and variant', () => {
+        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
+        const button1 = getByTestId('button1');
+        expect(button1).toHaveClass('!tw-bg-sq-disabled-gray tw-border-sq-color-dark');
+        const button2 = getByTestId('button2');
+        expect(button2).not.toHaveClass('tw-bg-sq-color-highlight');
+    });
+});
+//# sourceMappingURL=ButtonGroup.test.js.map

package/dist/ButtonGroup/ButtonGroup.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.test.js","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.test.tsx"],"names":[],"mappings":"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"}

package/dist/ButtonGroup/ButtonGroup.types.d.ts

@@ -0,0 +1,40 @@
+import { ButtonProps } from '../Button/Button.types';
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Interface representing the properties for an appended button.
+ */
+interface AppendedButtonProps {
+    /** Specifies that the variant is a button */
+    variant: 'button';
+    /** The properties for the button */
+    buttonProps: ButtonProps & {
+        buttonValue: string;
+    };
+}
+/**
+ * Props for an element variant in the ButtonGroup appended component.
+ */
+interface ElementProps {
+    /** Specifies that this is an element variant */
+    variant: 'element';
+    /** The React node to be rendered as the element */
+    element: React.ReactNode;
+    /** Extra class names to be applied to the element container*/
+    extraClassNames?: string;
+}
+type Props = AppendedButtonProps | ElementProps | undefined;
+/**
+ * Interface representing the base properties for an button group component.
+ * Extends the properties of a Tooltip.
+ */
+export interface ButtonGroupProps extends TooltipComponentProps {
+    /** Array of buttons to form a group */
+    buttons: Props[];
+    id?: string;
+    extraClassNames?: string;
+    name?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    testId?: string;
+}
+export {};

package/dist/ButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export { ButtonGroup as default } from './ButtonGroup';

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import InputGroup from './InputGroup';
 import Collapse from './Collapse';
 import Slider from './Slider';
 import ProgressBar from './ProgressBar';
+import ButtonGroup from './ButtonGroup';
 export { Tabs };
 export { Button };
 export { ToolbarButton };
@@ -39,3 +40,4 @@ export { InputGroup };
 export { Collapse };
 export { Slider };
 export { ProgressBar };
+export { ButtonGroup };

package/dist/index.esm.js

@@ -4632,7 +4632,7 @@ const borderColorClasses$4 = [
     'focus:tw-border-sq-color-dark',
     'active:tw-border-sq-color-dark',
 ].join(' ');
-const baseClasses$5 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
+const baseClasses$6 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
     ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
     ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
     '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
@@ -4682,7 +4682,7 @@ const TextField = React__default.forwardRef((props, ref) => {
     else if (inputGroup === 'right') {
         borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
     }
-    const appliedClasses = `${baseClasses$5} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
+    const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
     const inputProp = setValidInputDimension(inputWidth, inputHeight)
         ? {
             style: setValidInputDimension(inputWidth, inputHeight),
@@ -4700,13 +4700,13 @@ const TextField = React__default.forwardRef((props, ref) => {
 
 const alignment = 'tw-flex';
 const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
-const baseClasses$4 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
+const baseClasses$5 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
     '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
     ' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
     ' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
     ' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
-const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$4}`;
-const radioClasses = `tw-form-radio ${baseClasses$4}`;
+const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$5}`;
+const radioClasses = `tw-form-radio ${baseClasses$5}`;
 /**
  * Checkbox and Radio Box Component.
  */
@@ -4721,7 +4721,7 @@ const Checkbox = (props) => {
                 : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
 };
 
-const baseClasses$3 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-w-full' +
+const baseClasses$4 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-w-full' +
     ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
     ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
 const darkTheme$2 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
@@ -4740,7 +4740,7 @@ const borderColorClasses$3 = [
  * TextArea.
  */
 const TextArea = ({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }) => {
-    const appliedClasses = `${baseClasses$3} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${showError ? errorClasses$3 : borderColorClasses$3}`;
+    const appliedClasses = `${baseClasses$4} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${showError ? errorClasses$3 : borderColorClasses$3}`;
     return (React__default.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
 };
 
@@ -13317,7 +13317,7 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var CreatableSelect$1 = CreatableSelect;
 
-const baseClasses$2 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
+const baseClasses$3 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
 const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const errorClasses$2 = 'tw-border-sq-danger-color';
 const borderColorClasses$2 = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
@@ -13459,7 +13459,7 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
                     border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
                 }
                 const appliedClasses = `${borderStyles$3} ${border}  ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
-                return `${appliedClasses} ${baseClasses$2} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
+                return `${appliedClasses} ${baseClasses$3} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
             },
             placeholder: () => placeholderStyles,
             container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
@@ -15829,7 +15829,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                     }))))));
 };
 
-const baseClasses$1 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-w-full tw-relative' +
+const baseClasses$2 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-w-full tw-relative' +
     ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
 const darkTheme$1 = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
 const lightTheme$1 = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
@@ -15851,7 +15851,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
         warning: 'tw-border-none',
         gray: 'tw-border-sq-darkish-gray',
     };
-    const appliedClasses = `${baseClasses$1} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
+    const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
     if (!show) {
         return React__default.createElement("div", null);
     }
@@ -15924,7 +15924,7 @@ const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNa
                 })))));
 };
 
-const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
+const baseClasses$1 = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
 const errorClasses = 'tw-border-sq-danger-color';
 const borderColorClasses = [
     'tw-border-sq-disabled-gray',
@@ -15944,7 +15944,7 @@ const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
 const InputGroup = React__default.forwardRef((props, ref) => {
     const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, maxLength, minLength, ...tooltipProps } = props;
     const tooltipData = getQTipData(tooltipProps);
-    const appliedClasses = `${baseClasses} ${extraClassNames}`;
+    const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
     const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
     return (React__default.createElement("div", { id: `input-group-${id}`, className: appliedClasses },
         field ? (React__default.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React__default.createElement(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full tw-rounded-r-none focus:tw-z-30 ${extraClassNames}`, ...tooltipData })),
@@ -20691,5 +20691,34 @@ const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', }) =>
     })));
 };
 
-export { Accordion, Alert, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Collapse, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
+const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
+const activeClassesByVariantLightTheme = {
+    'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
+    'theme': 'tw-bg-sq-color-highlight',
+    'danger': '',
+    'theme-light': '',
+    'no-border': '!tw-bg-sq-disabled-gray',
+    'warning': '',
+};
+const activeClassesByVariantDarkTheme = {
+    'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
+    'theme': 'dark:tw-bg-sq-color-highlight',
+    'danger': '',
+    'theme-light': '',
+    'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
+    'warning': '',
+};
+/**
+ * ButtonGroup.
+ */
+const ButtonGroup = (props) => {
+    const { id, extraClassNames, value, testId, onChange, buttons = [], ...tooltipProps } = props;
+    const tooltipData = getQTipData(tooltipProps);
+    const appliedClasses = `${baseClasses} ${extraClassNames}`;
+    return (React__default.createElement("div", { id: `button-group-${id || ''}`, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React__default.createElement(Button, { key: index, ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-r-none tw-rounded-l-none last:tw-rounded-r-sm first:tw-rounded-l-sm ${item?.buttonProps && value === item?.buttonProps?.buttonValue
+            ? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
+            : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.buttonValue) })) : (React__default.createElement("div", { key: index, className: ` tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 ${item?.extraClassNames || ''}` }, item?.element)))));
+};
+
+export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Checkbox, Collapse, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
 //# sourceMappingURL=index.esm.js.map