@indico-data/design-system 3.12.0 → 3.13.1

package/lib/components/button/types.d.ts

@@ -2,39 +2,15 @@ import { IconName } from '../../types';
 export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonTypes = 'button' | 'submit' | 'reset';
-export interface ButtonProps {
-    /**
-     * The class name to apply to the button
-     */
-    className?: string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * The aria-label to apply to the button
      */
     ariaLabel: string;
-    /**
-     * The children to apply to the button
-     */
-    children?: React.ReactNode | React.ReactNode[];
-    /**
-     * The function to call when the mouse enters the button
-     */
-    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * The function to call when the mouse exits the button
      */
     onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * The function to call when the button loses focus
-     */
-    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    /**
-     * The function to call when the button is clicked
-     */
-    onClick?: (...args: any[]) => void;
-    /**
-     * The function to call when the button is pressed
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     /**
      * Determines the visual style and emphasis level of the button
      */

package/lib/index.d.ts

@@ -260,39 +260,15 @@ type ChromaticColor = 'blue' | 'purple' | 'red' | 'yellow' | 'gray' | 'green' |
 type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 type ButtonTypes = 'button' | 'submit' | 'reset';
-interface ButtonProps {
-    /**
-     * The class name to apply to the button
-     */
-    className?: string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * The aria-label to apply to the button
      */
     ariaLabel: string;
-    /**
-     * The children to apply to the button
-     */
-    children?: React.ReactNode | React.ReactNode[];
-    /**
-     * The function to call when the mouse enters the button
-     */
-    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * The function to call when the mouse exits the button
      */
     onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * The function to call when the button loses focus
-     */
-    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    /**
-     * The function to call when the button is clicked
-     */
-    onClick?: (...args: any[]) => void;
-    /**
-     * The function to call when the button is pressed
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     /**
      * Determines the visual style and emphasis level of the button
      */

package/lib/index.esm.js

@@ -5042,7 +5042,7 @@ const Icon = (_a) => {
 };
 
 const Button$1 = forwardRef((props, ref) => {
-    const { ariaLabel, children, isLoading, isDisabled, variant = 'solid', isPill, iconLeft, iconRight, onClick, type = 'button', size = 'md', onMouseEnter, onMouseExit, onKeyDown, onBlur, className, href } = props, rest = __rest(props, ["ariaLabel", "children", "isLoading", "isDisabled", "variant", "isPill", "iconLeft", "iconRight", "onClick", "type", "size", "onMouseEnter", "onMouseExit", "onKeyDown", "onBlur", "className", "href"]);
+    const { ariaLabel, children, isLoading, isDisabled, variant = 'solid', isPill, iconLeft, iconRight, onClick, type = 'button', size = 'md', onMouseExit, className, href } = props, rest = __rest(props, ["ariaLabel", "children", "isLoading", "isDisabled", "variant", "isPill", "iconLeft", "iconRight", "onClick", "type", "size", "onMouseExit", "className", "href"]);
     const buttonClasses = classNames('btn', {
         [`btn--${variant}`]: variant,
         [`btn--${size}`]: size,
@@ -5055,7 +5055,7 @@ const Button$1 = forwardRef((props, ref) => {
             onClick(event);
         }
     };
-    return (jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseEnter: onMouseEnter, onMouseLeave: onMouseExit, onKeyDown: onKeyDown, onBlur: onBlur }, rest, { children: [isLoading && !iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, className: children ? 'mr-2' : '', ariaLabel: "Loading...", size: size })), iconLeft && !isLoading && (jsx(Icon, { name: iconLeft, className: children ? 'mr-2' : '', ariaLabel: `${iconLeft} Icon`, size: size })), children, iconRight && !isLoading && (jsx(Icon, { name: iconRight, className: children ? 'ml-2' : '', ariaLabel: `${iconRight} Icon`, size: size })), isLoading && iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, className: children ? 'ml-2' : '', ariaLabel: "Loading...", size: size }))] })));
+    return (jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseLeave: onMouseExit }, rest, { children: [isLoading && !iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, className: children ? 'mr-2' : '', ariaLabel: "Loading...", size: size })), iconLeft && !isLoading && (jsx(Icon, { name: iconLeft, className: children ? 'mr-2' : '', ariaLabel: `${iconLeft} Icon`, size: size })), children, iconRight && !isLoading && (jsx(Icon, { name: iconRight, className: children ? 'ml-2' : '', ariaLabel: `${iconRight} Icon`, size: size })), isLoading && iconRight && (jsx(Icon, { name: "indico-o", style: { animation: 'spin 1s linear infinite' }, className: children ? 'ml-2' : '', ariaLabel: "Loading...", size: size }))] })));
 });
 
 var l;function r$1(e,t){return e[t]}function i(e=[],t,n=0){return [...e.slice(0,n),t,...e.slice(n)]}function s(e=[],t,n="id"){const o=e.slice(),a=r$1(t,n);return a?o.splice(o.findIndex((e=>r$1(e,n)===a)),1):o.splice(o.findIndex((e=>e===t)),1),o}function d(e){return e.map(((e,t)=>{const n=Object.assign(Object.assign({},e),{sortable:e.sortable||!!e.sortFunction||void 0});return e.id||(n.id=t+1),n}))}function c(e,t){return Math.ceil(e/t)}function g(e,t){return Math.min(e,t)}!function(e){e.ASC="asc",e.DESC="desc";}(l||(l={}));const u=()=>null;function p(e,t=[],n=[]){let o={},a=[...n];return t.length&&t.forEach((t=>{if(!t.when||"function"!=typeof t.when)throw new Error('"when" must be defined in the conditional style object and must be function');t.when(e)&&(o=t.style||{},t.classNames&&(a=[...a,...t.classNames]),"function"==typeof t.style&&(o=t.style(e)||{}));})),{conditionalStyle:o,classNames:a.join(" ")}}function b$1(e,t=[],n="id"){const o=r$1(e,n);return o?t.some((e=>r$1(e,n)===o)):t.some((t=>t===e))}function m(e,t){return t?e.findIndex((e=>h$1(e.id,t))):-1}function h$1(e,t){return e==t}function w$1(e,t){const n=!e.toggleOnSelectedRowsChange;switch(t.type){case"SELECT_ALL_ROWS":{const{keyField:n,rows:o,rowCount:a,mergeSelections:l}=t,r=!e.allSelected,i=!e.toggleOnSelectedRowsChange;if(l){const t=r?[...e.selectedRows,...o.filter((t=>!b$1(t,e.selectedRows,n)))]:e.selectedRows.filter((e=>!b$1(e,o,n)));return Object.assign(Object.assign({},e),{allSelected:r,selectedCount:t.length,selectedRows:t,toggleOnSelectedRowsChange:i})}return Object.assign(Object.assign({},e),{allSelected:r,selectedCount:r?a:0,selectedRows:r?o:[],toggleOnSelectedRowsChange:i})}case"SELECT_SINGLE_ROW":{const{keyField:o,row:a,isSelected:l,rowCount:r,singleSelect:d}=t;return d?l?Object.assign(Object.assign({},e),{selectedCount:0,allSelected:!1,selectedRows:[],toggleOnSelectedRowsChange:n}):Object.assign(Object.assign({},e),{selectedCount:1,allSelected:!1,selectedRows:[a],toggleOnSelectedRowsChange:n}):l?Object.assign(Object.assign({},e),{selectedCount:e.selectedRows.length>0?e.selectedRows.length-1:0,allSelected:!1,selectedRows:s(e.selectedRows,a,o),toggleOnSelectedRowsChange:n}):Object.assign(Object.assign({},e),{selectedCount:e.selectedRows.length+1,allSelected:e.selectedRows.length+1===r,selectedRows:i(e.selectedRows,a),toggleOnSelectedRowsChange:n})}case"SELECT_MULTIPLE_ROWS":{const{keyField:o,selectedRows:a,totalRows:l,mergeSelections:r}=t;if(r){const t=[...e.selectedRows,...a.filter((t=>!b$1(t,e.selectedRows,o)))];return Object.assign(Object.assign({},e),{selectedCount:t.length,allSelected:!1,selectedRows:t,toggleOnSelectedRowsChange:n})}return Object.assign(Object.assign({},e),{selectedCount:a.length,allSelected:a.length===l,selectedRows:a,toggleOnSelectedRowsChange:n})}case"CLEAR_SELECTED_ROWS":{const{selectedRowsFlag:n}=t;return Object.assign(Object.assign({},e),{allSelected:!1,selectedCount:0,selectedRows:[],selectedRowsFlag:n})}case"SORT_CHANGE":{const{sortDirection:o,selectedColumn:a,clearSelectedOnSort:l}=t;return Object.assign(Object.assign(Object.assign({},e),{selectedColumn:a,sortDirection:o,currentPage:1}),l&&{allSelected:!1,selectedCount:0,selectedRows:[],toggleOnSelectedRowsChange:n})}case"CHANGE_PAGE":{const{page:o,paginationServer:a,visibleOnly:l,persistSelectedOnPageChange:r}=t,i=a&&r,s=a&&!r||l;return Object.assign(Object.assign(Object.assign(Object.assign({},e),{currentPage:o}),i&&{allSelected:!1}),s&&{allSelected:!1,selectedCount:0,selectedRows:[],toggleOnSelectedRowsChange:n})}case"CHANGE_ROWS_PER_PAGE":{const{rowsPerPage:n,page:o}=t;return Object.assign(Object.assign({},e),{currentPage:o,rowsPerPage:n})}}}const f=css`
@@ -5630,7 +5630,7 @@ const HorizontalStickyHeader = ({ children, position, onPinColumn, isPinned = fa
         });
         calculateWidth();
     }, [position, isPinned, pinnedColumnIds]);
-    return (jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [jsx(Button$1, { "data-testid": `sticky-header-pin-button-${position}`, variant: "link", size: "sm", iconLeft: "pin", onClick: onPinColumn, ariaLabel: isPinned ? 'Unpin column' : 'Pin column', className: `table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action` }), jsx("div", { className: "table__header-content", children: children })] }));
+    return (jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [jsx(Button$1, { "data-testid": `sticky-header-pin-button-${position}`, variant: "link", size: "sm", iconLeft: "pin", onClick: () => onPinColumn === null || onPinColumn === void 0 ? void 0 : onPinColumn(`sticky-column-${position}`), ariaLabel: isPinned ? 'Unpin column' : 'Pin column', className: `table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action` }), jsx("div", { className: "table__header-content", children: children })] }));
 };
 
 const processColumns = (columns, pinnedColumnIds, togglePinnedColumn) => {