@bspk/ui 1.1.17 → 1.1.19

package/src/AvatarGroup.tsx

@@ -0,0 +1,71 @@
+import { Avatar, AvatarProps, SizeVariant } from './Avatar';
+import './avatar-group.scss';
+
+export type AvatarItem = Pick<AvatarProps, 'color' | 'icon' | 'image' | 'initials' | 'name'>;
+
+export type AvatarGroupProps = {
+    /**
+     * The avatars to display in the group.
+     *
+     * @example
+     *     [
+     *         { name: 'Jane Doe', image: '/path/to/image.jpg' },
+     *         { name: 'John Smith', initials: 'JS' },
+     *     ];
+     *
+     * @type Array<AvatarItem>
+     * @required
+     */
+    items: AvatarItem[];
+    /**
+     * Size of the avatar group.
+     *
+     * @default small
+     */
+    size?: Extract<SizeVariant, 'large' | 'medium' | 'small' | 'x-small'>;
+    /**
+     * The maximum number of avatars to display before showing the overflowCount.
+     *
+     * This is used to limit the number of avatars displayed in the group.
+     *
+     * @minimum 3
+     * @maximum 5
+     */
+    max?: number;
+    /**
+     * The variant of the avatar group.
+     *
+     * @default spread
+     */
+    variant?: 'spread' | 'stacked';
+};
+
+/**
+ * AvatarGroup component displays a group of avatars.
+ *
+ * @name AvatarGroup
+ */
+function AvatarGroup({ items, size = 'small', max = 5, variant }: AvatarGroupProps) {
+    if (!Array.isArray(items) || !items?.length) return null;
+
+    const overFlowCount = items.length - max;
+
+    return (
+        <div data-bspk="avatar-group" data-max={max} data-size={size} data-variant={variant}>
+            <div data-wrap>
+                {items.map((item, index) => (
+                    <Avatar key={index} {...item} size={size} />
+                ))}
+                {overFlowCount > 0 && (
+                    <div aria-hidden data-bspk="avatar" data-size={size}>
+                        <span data-overflow-count>+{overFlowCount}</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+AvatarGroup.bspkName = 'AvatarGroup';
+
+export { AvatarGroup };

package/src/Button.tsx

@@ -9,10 +9,18 @@ import { ButtonSize, CommonProps, ElementProps } from './';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'onClick'> & {
-    /** The label of the button. */
-    label?: string;
-    /** The icon of the button. */
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
+    /**
+     * The label of the button.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The icon of the button.
+     *
+     * @type BspkIcon
+     */
     icon?: ReactNode;
     /**
      * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
@@ -59,6 +67,8 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
     children?: ReactNode;
     /** The tool tip text that appears when hovered. */
     toolTip?: string;
+    /** The function to call when the button is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 
 /**

package/src/Checkbox.tsx

@@ -1,17 +1,31 @@
 import './checkbox.scss';
-import { useEffect, useRef } from 'react';
+import { ChangeEvent, useEffect, useRef } from 'react';
 
-import { ToggleControlProps, ElementProps } from './';
+import { CommonProps, ElementProps, InvalidPropsLibrary } from './';
 
-export type CheckboxProps = ToggleControlProps<HTMLInputElement> & {
-    /**
-     * If the checkbox is partially checked or
-     * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
-     *
-     * @default false
-     */
-    indeterminate?: boolean;
-};
+export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
+    InvalidPropsLibrary &
+    Required<CommonProps<'value'>> & {
+        /**
+         * If the checkbox is partially checked or
+         * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
+         *
+         * @default false
+         */
+        indeterminate?: boolean;
+        /**
+         * Marks the checkbox as checked.
+         *
+         * @default false
+         */
+        checked?: boolean;
+        /**
+         * The function to call when the checkbox is checked or unchecked.
+         *
+         * @required
+         */
+        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    };
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base

package/src/CheckboxGroup.tsx

@@ -9,9 +9,12 @@ export type CheckboxGroupProps = CommonProps<'aria-label'> & {
     /**
      * The function to call when the checkboxes are changed.
      *
+     * @example
+     *     (values) => setState({ values });
+     *
      * @required
      */
-    onChange: (value: string[]) => void;
+    onChange: (values: string[]) => void;
     /**
      * The input control name of the checkboxes.
      *
@@ -21,14 +24,14 @@ export type CheckboxGroupProps = CommonProps<'aria-label'> & {
     /**
      * The options for the checkboxes.
      *
-     * @type CheckboxGroupOption[]
+     * @type Array<CheckboxGroupOption>
      * @required
      */
     options: CheckboxGroupOption[];
     /**
      * The values of the checked checkboxes.
      *
-     * @type string[]
+     * @type Array<string>
      */
     values?: CheckboxGroupProps['options'][number]['value'][];
     /**

package/src/CheckboxOption.tsx

@@ -4,8 +4,15 @@ import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 import { InvalidPropsLibrary } from '.';
 
 export type CheckboxOptionProps = InvalidPropsLibrary &
-    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'onChange' | 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'>;
+    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'value'> &
+    Pick<ToggleOptionProps, 'description' | 'label'> & {
+        /**
+         * The function to call when the checkbox is checked or unchecked.
+         *
+         * @required
+         */
+        onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    };
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.

package/src/Chip.tsx

@@ -3,7 +3,7 @@ import { CSSProperties, ReactNode } from 'react';
 
 import { CommonProps } from '.';
 
-export type ChipProps = CommonProps<'disabled' | 'onClick'> & {
+export type ChipProps = CommonProps<'disabled'> & {
     /**
      * The content of the chip.
      *
@@ -39,6 +39,8 @@ export type ChipProps = CommonProps<'disabled' | 'onClick'> & {
     selected?: boolean;
     /** The style of the chip. */
     style?: CSSProperties;
+    /** The function to call when the chip is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 };
 
 /**

package/src/Dialog.tsx

@@ -1,18 +1,18 @@
 import './dialog.scss';
 import { FocusTrap } from 'focus-trap-react';
-import { ReactNode, Ref, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Portal } from './Portal';
 import { useId } from './hooks/useId';
 import { useOutsideClick } from './hooks/useOutsideClick';
 
-import { CommonProps, ElementProps } from './';
+import { CommonProps, ElementProps, SetRef } from './';
 
 export type DialogProps = CommonProps<'id'> & {
     /** The content of the dialog. */
     children?: ReactNode;
     /** A ref to the dialog element. */
-    innerRef?: Ref<HTMLDivElement>;
+    innerRef?: SetRef<HTMLDivElement>;
     /**
      * If the dialog should appear.
      *

package/src/Dropdown.tsx

@@ -10,27 +10,48 @@ import { useId } from './hooks/useId';
 
 import { CommonProps, InvalidPropsLibrary } from './';
 
-export type DropdownOption = {
+export type DropdownOption = Record<string, unknown> & {
     /** The value of the option. */
     value: string;
     /** The label of the option. This is the text that will be displayed on the option. */
     label: string;
 };
 
-export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonProps<
+export type DropdownOptionAll = {
+    /** The label of the option. This is the text that will be displayed on the option. */
+    label: string;
+    /** Whether the option is selected. */
+    selected?: boolean;
+};
+
+export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonProps<
     'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'
 > &
     InvalidPropsLibrary &
-    Pick<MenuProps<O>, 'isMulti' | 'itemCount' | 'onChange' | 'renderListItem'> & {
+    Pick<MenuProps<T>, 'isMulti' | 'itemCount' | 'renderListItem' | 'selectAll'> & {
         /**
          * Array of options to display in the dropdown
          *
-         * @type DropdownOption[]
+         * @example
+         *     [
+         *         { value: '1', label: 'Option 1' },
+         *         { value: '2', label: 'Option 2' },
+         *         { value: '3', label: 'Option 3' },
+         *         { value: '4', label: 'Option 4' },
+         *         { value: '5', label: 'Option 5' },
+         *         { value: '6', label: 'Option 6' },
+         *         { value: '7', label: 'Option 7' },
+         *         { value: '8', label: 'Option 8' },
+         *         { value: '9', label: 'Option 9' },
+         *         { value: '10', label: 'Option 10' },
+         *     ];
+         *
+         * @type Array<DropdownOption>
          * @required
          */
-        options: O[];
+        options: T[];
         /**
-         * Array of selected values!
+         * Array of selected values
          *
          * @type Array<string>
          */
@@ -38,7 +59,7 @@ export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonPro
         /**
          * Placeholder for the dropdown
          *
-         * @default Select...
+         * @default Select one...
          */
         placeholder?: string;
         /**
@@ -49,6 +70,12 @@ export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonPro
         placement?: Extract<Placement, 'bottom' | 'top'>;
         /** The style of the dropdown. */
         style?: React.CSSProperties;
+        /**
+         * The function to call when the selected values change.
+         *
+         * @required
+         */
+        onChange?: (value: string[], event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     };
 
 /**
@@ -56,7 +83,7 @@ export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonPro
  *
  * @name Dropdown
  */
-function Dropdown<O extends DropdownOption = DropdownOption>({
+function Dropdown({
     options = [],
     value: selected,
     onChange,
@@ -74,7 +101,8 @@ function Dropdown<O extends DropdownOption = DropdownOption>({
     isMulti,
     renderListItem,
     style: styleProp,
-}: DropdownProps<O>) {
+    selectAll,
+}: DropdownProps) {
     const id = useId(propId);
 
     const { triggerProps, menuProps, closeMenu } = useFloatingMenu({
@@ -116,12 +144,13 @@ function Dropdown<O extends DropdownOption = DropdownOption>({
                     isMulti={isMulti}
                     itemCount={itemCount}
                     items={options}
-                    onChange={(selectedValues, event) => {
+                    onChange={(next, event) => {
                         event?.preventDefault();
                         if (!isMulti) closeMenu();
-                        onChange?.(selectedValues);
+                        onChange?.(next);
                     }}
                     renderListItem={renderListItem}
+                    selectAll={selectAll}
                     selectedValues={selected}
                     {...menuProps}
                 />