@stack-spot/citric-react 0.42.0 → 0.44.0

package/src/components/CitricComponent.ts

@@ -5,7 +5,7 @@ export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' |
   'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' |
   'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' |
   'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' |
-  'circle' | 'multi-select'
+  'circle' | 'multi-select' | 'autocomplete'
 
 interface BaseCitricProps extends WithColorScheme, WithColorPalette {
   component: CitricComponentName,

package/src/components/IconBox.tsx

@@ -58,6 +58,12 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
 }
 
 export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>
+export type IconButtonProps<G extends IconGroup> = (
+  Omit<React.JSX.IntrinsicElements['button'], 'children'> & Omit<BaseIconBoxProps<'button', G>, 'tag'>
+)
+export type IconLinkProps<G extends IconGroup> = (
+  Omit<React.JSX.IntrinsicElements['a'], 'children'> & Omit<BaseIconBoxProps<'a', G>, 'tag'>
+)
 
 /**
  * Renders a wrapper for an icon. The icon must specified by the properties "icon" and "group", this component accepts no children.
@@ -111,7 +117,7 @@ export const IconBox = withRef(
  * ```
  */
 export const IconButton = withRef(
-  function IconButton<G extends IconGroup = 'outline'>({ type, ...props }: Omit<IconBoxProps<'button', G>, 'tag'>) {
+  function IconButton<G extends IconGroup = 'outline'>({ type, ...props }: IconButtonProps<G>) {
     return <IconBox {...props} tag="button" type={type || 'button' } />
   },
 )
@@ -128,7 +134,7 @@ export const IconButton = withRef(
  * ```
  */
 export const IconLink = withRef(
-  function IconLink<G extends IconGroup = 'outline'>(props: Omit<IconBoxProps<'a', G>, 'tag'>) {
+  function IconLink<G extends IconGroup = 'outline'>(props: IconLinkProps<G>) {
     return <IconBox {...props} tag="a" />
   },
 )

package/src/components/ImageBox.tsx

@@ -48,6 +48,12 @@ export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalet
 }
 
 export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>
+export type ImageButtonProps = (
+  Omit<React.JSX.IntrinsicElements['button'], 'children'> & Omit<BaseImageBoxProps<'button'>, 'tag'>
+)
+export type ImageLinkProps = (
+  Omit<React.JSX.IntrinsicElements['a'], 'children'> & Omit<BaseImageBoxProps<'a'>, 'tag'>
+)
 
 /**
  * Renders a wrapper for its child (normally an image). The image will be resized and cropped to fit the container. The image is not cropped
@@ -102,7 +108,7 @@ export const ImageBox = withRef(
  * ```
  */
 export const ImageButton = withRef(
-  function ImageButton(props: Omit<ImageBoxProps<'button'>, 'tag'>) {
+  function ImageButton(props: ImageButtonProps) {
     return <ImageBox {...props} tag="button" type={props.type || 'button'} />
   },
 )
@@ -119,7 +125,7 @@ export const ImageButton = withRef(
  * ```
  */
 export const ImageLink = withRef(
-  function ImageLink(props: Omit<ImageBoxProps<'a'>, 'tag'>) {
+  function ImageLink(props: ImageLinkProps) {
     return <ImageBox {...props} tag="a" />
   },
 )

package/src/components/Overlay/index.tsx

@@ -47,9 +47,11 @@ export function Overlay<T extends keyof HTMLTag>({
   alignment = 'center',
   attributes,
   onRenderChild,
-  autoFocusBehavior = 'keyboard',
+  autoFocusBehavior = 'always',
   openDelayMS,
   closeDelayMS,
+  onShowOverlay,
+  onHideOverlay,
   ...props
 }: OverlayProps<T>,
 ) {
@@ -66,7 +68,6 @@ export function Overlay<T extends keyof HTMLTag>({
     let visible = false
     let hideOnClickOutside: ((event: Event) => void) | undefined
     let hideOnEsc: ((event: Event) => void) | undefined
-    let hideOverlay: ((immediately?: boolean) => Promise<void>) | undefined
     let removeRefocusTargetListener: (() => void) | undefined
 
     function getTarget() {
@@ -101,8 +102,11 @@ export function Overlay<T extends keyof HTMLTag>({
         alignment: dynamic.current.alignment,
         attributes: dynamic.current.attributes,
       })
-      hideOverlay?.(true) // ensures there's no lost opened overlay.
-      hideOverlay = hideFn
+
+      if (onShowOverlay) {
+        const trigger = target instanceof Event ? target.target : target
+        if (trigger instanceof HTMLElement) onShowOverlay(trigger, overlay)
+      }
 
       function onHide(condition: (event: Event) => boolean) {
         return (event: Event) => {
@@ -137,17 +141,21 @@ export function Overlay<T extends keyof HTMLTag>({
       if (autoFocusBehavior === 'always' || (autoFocusBehavior === 'keyboard' && !openedWithMouse)) {
         setTimeout(() => focusFirstChild(overlay), arbitraryRenderTime)
       }
-    }
 
-    controller.current.close = async (immediately = false) => {
-      if (!immediately && (closeDelayMS ?? 0) > 0) {
-        await delay(closeDelayMS ?? 0)
+      controller.current.close = async (immediately = false) => {
+        if (!immediately && (closeDelayMS ?? 0) > 0) {
+          await delay(closeDelayMS ?? 0)
+        }
+        visible = false
+        if (hideOnClickOutside) document.removeEventListener('click', hideOnClickOutside)
+        if (hideOnEsc) document.removeEventListener('keydown', hideOnEsc)
+        removeRefocusTargetListener?.()
+        await hideFn?.()
+        if (onHideOverlay) {
+          const trigger = target instanceof Event ? target.target : target
+          if (trigger instanceof HTMLElement) onHideOverlay(trigger)
+        }
       }
-      visible = false
-      if (hideOnClickOutside) document.removeEventListener('click', hideOnClickOutside)
-      if (hideOnEsc) document.removeEventListener('keydown', hideOnEsc)
-      removeRefocusTargetListener?.()
-      await hideOverlay?.()
     }
 
     if (triggerOn === 'hover') {
@@ -172,11 +180,9 @@ export function Overlay<T extends keyof HTMLTag>({
         if (hideOnClickOutside) document.removeEventListener('click', hideOnClickOutside)
       }
     }
-  }, [wrapper.current, triggerOn])
 
-  useEffect(() => () => {
-    controller.current?.close(true)
-  }, [])
+    return () => controller.current.close(true) // prevents orfan tooltips
+  }, [wrapper.current, triggerOn])
 
   return <div ref={wrapper} {...props}>{children}</div>
 }

package/src/components/Select/RichSelect.tsx

@@ -32,6 +32,8 @@ export const RichSelect = withRef(
     onBlur,
     showArrow,
     placeholder,
+    name,
+    selectAttributes,
     ...props
   }: SelectProps<T> & { type?: 'rich' },
   ) {
@@ -80,6 +82,7 @@ export const RichSelect = withRef(
         {...props}
       >
         <SimpleSelect
+          selectAttributes={selectAttributes}
           options={options}
           value={value}
           renderLabel={renderLabel}
@@ -90,6 +93,7 @@ export const RichSelect = withRef(
           onFocus={onFocus}
           onBlur={onBlur}
           wrap={false}
+          name={name}
         />
         <header
           onClick={() => {

package/src/components/Select/SimpleSelect.tsx

@@ -19,6 +19,8 @@ export const SimpleSelect = withRef(
     onBlur,
     onFocus,
     wrap,
+    name,
+    selectAttributes,
     ...props
   }: SelectProps<T> & { wrap?: boolean },
   ) {
@@ -42,6 +44,7 @@ export const SimpleSelect = withRef(
 
     return wrap === false ? (
       <CitricComponent
+        {...selectAttributes}
         tag="select"
         ref={ref as MutableRefObject<HTMLSelectElement | null>}
         required={required}
@@ -51,18 +54,21 @@ export const SimpleSelect = withRef(
         onFocus={onFocus}
         onBlur={onBlur}
         value={value ? renderKey(value) : ''}
+        name={name}
       >
         {renderedOptions}
       </CitricComponent>
     ) : (
       <CitricComponent ref={ref as MutableRefObject<HTMLDivElement | null>} tag="div" component="select" aria-busy={loading} {...props}>
         <select
+          {...selectAttributes}
           value={value ? renderKey(value) : undefined}
           required={required}
           onChange={handleChange}
           disabled={disabled || loading}
           onFocus={onFocus}
           onBlur={onBlur}
+          name={name}
         >
           {renderedOptions}
         </select>

package/src/components/Select/types.ts

@@ -77,6 +77,17 @@ export interface CommonSelectProps<T> extends WithColorScheme {
    * A text to show when no option is selected.
    */
   placeholder?: string,
+  /**
+   * The field's name.
+   */
+  name?: string,
+  /**
+   * Attributes for the HTML Select element.
+   */
+  selectAttributes?: Omit<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    'value' | 'required' | 'disabled' | 'onChange' | 'onFocus' | 'onBlur' | 'name'
+  >,
 }
 
 export interface SimpleSelectProps<T> extends CommonSelectProps<T> {

package/src/components/Tooltip.tsx

@@ -74,7 +74,8 @@ export const Tooltip = ({
         'data-color-palette': colorPalette,
         ...attributes,
       }}
-      onRenderChild={e => e.setAttribute('aria-describedby', id.current)}
+      onShowOverlay={trigger => trigger.setAttribute('aria-describedby', id.current)}
+      onHideOverlay={trigger => trigger.removeAttribute('aria-describedby')}
       {...props}
     >
       {children}

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './components/Accordion'
 export * from './components/Alert'
 export * from './components/AsyncContent'
+export * from './components/Autocomplete'
 export * from './components/Avatar'
 export * from './components/AvatarGroup'
 export * from './components/Badge'

package/src/overlay.ts

@@ -59,6 +59,18 @@ export interface OverlayOptions<T extends keyof HTMLTag> {
    * The attributes for the HTMLElement that will be created for the overlay.
    */
   attributes?: JSX.IntrinsicElements[T] & WithDataAttributes & { inert?: boolean },
+  /**
+   * Function to run whenever the overlay is shown.
+   * @param trigger the HTML Element who triggered the overlay.
+   * @param overlay the HTML Element corresponding to the overlay's root.
+   */
+  onShowOverlay?: (trigger: HTMLElement, overlay: HTMLElement) => void,
+  /**
+   * Function to run whenever the overlay is hidden.
+   * @param trigger the HTML Element who triggered the overlay.
+   * @param overlay the HTML Element corresponding to the overlay's root.
+   */
+  onHideOverlay?: (trigger: HTMLElement) => void,
 }
 
 interface Position {