@indico-data/design-system 3.10.0 → 3.12.0

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

@@ -23,6 +23,10 @@ export interface ButtonProps {
      * 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
      */

package/lib/components/forms/select/Select.d.ts

@@ -17,5 +17,7 @@ export interface SelectProps<OptionType extends SelectOption> extends ReactSelec
     /** Event handler for when the selected value changes */
     onChange?: (newValue: any, actionMeta: any) => void;
 }
-declare const LabeledSelect: React.ForwardRefExoticComponent<SelectProps<SelectOption> & import("../subcomponents/Label").LabelProps & React.RefAttributes<any>>;
+declare const LabeledSelect: React.ForwardRefExoticComponent<Omit<SelectProps<SelectOption> & {
+    ref?: React.Ref<any>;
+} & import("../subcomponents/Label").LabelProps, "ref"> & React.RefAttributes<any>>;
 export { LabeledSelect as Select };

package/lib/components/forms/select/types.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 export type SelectOption = {
     label: string;
     value: string;
-    detail?: string;
+    detail?: ReactNode;
     [key: string]: any;
 };

package/lib/index.d.ts

@@ -3,7 +3,7 @@ import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
-import React$1, { CSSProperties, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import React$1, { CSSProperties, MouseEventHandler, ReactNode, ReactElement } from 'react';
 import { IDataTableProps, Direction as Direction$1, TableColumn as TableColumn$1 } from 'react-data-table-component';
 import { CSSObject } from 'styled-components';
 import { Props as Props$4 } from 'react-select';
@@ -200,7 +200,7 @@ type IconProps = PermafrostComponent & {
 type SelectOption = {
     label: string;
     value: string;
-    detail?: string;
+    detail?: ReactNode;
     [key: string]: any;
 };
 
@@ -281,6 +281,10 @@ interface ButtonProps {
      * 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
      */
@@ -483,7 +487,9 @@ interface SelectProps<OptionType extends SelectOption> extends Props$4<OptionTyp
     /** Event handler for when the selected value changes */
     onChange?: (newValue: any, actionMeta: any) => void;
 }
-declare const LabeledSelect: React$1.ForwardRefExoticComponent<SelectProps<SelectOption> & LabelProps & React$1.RefAttributes<any>>;
+declare const LabeledSelect: React$1.ForwardRefExoticComponent<Omit<SelectProps<SelectOption> & {
+    ref?: React$1.Ref<any>;
+} & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
 interface DatePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;

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, className, href } = props, rest = __rest(props, ["ariaLabel", "children", "isLoading", "isDisabled", "variant", "isPill", "iconLeft", "iconRight", "onClick", "type", "size", "onMouseEnter", "onMouseExit", "onKeyDown", "className", "href"]);
+    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 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 }, 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, 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 }))] })));
 });
 
 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`
@@ -5816,14 +5816,14 @@ const OptionComponent = (_a) => {
     var props = __rest(_a, []);
     return (jsx(components$1.Option, Object.assign({}, props, { children: jsxs("div", { className: "select__items", children: [jsx("div", { className: "select__item-value", children: (_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.label }), ((_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.detail) && jsx("div", { className: "select__item-detail", children: (_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.detail })] }) })));
 };
-const Select$1 = (_a) => {
+const Select$1 = React__default.forwardRef((_a, ref) => {
     var { classNamePrefix = 'select', className, components: customComponents, label, hasHiddenLabel, name } = _a, props = __rest(_a, ["classNamePrefix", "className", "components", "label", "hasHiddenLabel", "name"]);
     const defaultComponents = {
         Option: OptionComponent,
     };
     const mergedComponents = Object.assign(Object.assign({}, defaultComponents), customComponents);
-    return (jsx(ReactSelect, Object.assign({ classNamePrefix: classNamePrefix, className: classNames('select-wrapper', className), components: mergedComponents }, props)));
-};
+    return (jsx(ReactSelect, Object.assign({ ref: ref, classNamePrefix: classNamePrefix, className: classNames('select-wrapper', className), components: mergedComponents }, props)));
+});
 const LabeledSelect = withLabel(Select$1);
 
 /**