@infonomic/uikit 5.9.0 → 5.11.0

package/src/components/chips/chip.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { Slot } from '@radix-ui/react-slot'
+import cx from 'classnames'
+import type React from 'react'
+
+import { CheckIcon } from '../../icons/check-icon.js'
+import { IconButton } from '../button/icon-button.js'
+import { CloseIcon } from '../../icons/close-icon.js'
+import type { ChipIntent, ChipSize, ChipVariant } from './@types/chip.js'
+import styles from './chip.module.css'
+
+type AsButton = { asChild?: false } & React.ComponentPropsWithoutRef<'button'>
+
+interface AsSlot {
+	asChild?: true
+}
+
+export type ChipRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref']
+
+type ToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+type RemoveEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+
+export type ChipProps<C extends React.ElementType = 'button'> = {
+	variant?: ChipVariant
+	intent?: ChipIntent
+	size?: ChipSize
+	selected?: boolean
+	disabled?: boolean
+	startIcon?: React.ReactNode
+	endIcon?: React.ReactNode
+	selectedIcon?: React.ReactNode
+	removeLabel?: string
+	onToggle?: (selected: boolean, event: ToggleEvent) => void
+	onRemove?: (event: RemoveEvent) => void
+	className?: string
+	ref?: ChipRefType<C>
+} & (AsButton | AsSlot) &
+	Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>
+
+export const Chip = <C extends React.ElementType = 'button'>({
+	variant = 'assist',
+	intent = 'primary',
+	size = 'md',
+	selected = false,
+	disabled = false,
+	startIcon,
+	endIcon,
+	selectedIcon,
+	removeLabel = 'Remove chip',
+	onToggle,
+	onRemove,
+	className,
+	children,
+	asChild,
+	ref,
+	...rest
+}: ChipProps<C>) => {
+	const { onClick, onKeyDown, role, tabIndex, ...restProps } = rest
+	const Comp: React.ElementType = asChild === true ? Slot : 'button'
+	const isSelectable = variant === 'selectable' || variant === 'selectable-removable'
+	const isRemovable = variant === 'removable' || variant === 'selectable-removable'
+	const isSelected = Boolean(selected)
+
+	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+		if (disabled) {
+			event.preventDefault()
+			return
+		}
+
+		if (onClick) {
+			;(onClick as React.MouseEventHandler<HTMLElement>)(event)
+		}
+
+		if (isSelectable && onToggle) {
+			onToggle(!isSelected, event)
+		}
+	}
+
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+		if (disabled) {
+			return
+		}
+
+		if ((event.key === 'Enter' || event.key === ' ') && asChild === true) {
+			event.preventDefault()
+			if (onClick) {
+				;(onClick as React.MouseEventHandler<HTMLElement>)(event as unknown as React.MouseEvent<HTMLElement>)
+			}
+			if (isSelectable && onToggle) {
+				onToggle(!isSelected, event)
+			}
+		}
+
+		if ((event.key === 'Backspace' || event.key === 'Delete') && isRemovable && onRemove) {
+			event.preventDefault()
+			onRemove(event)
+		}
+
+		if (onKeyDown) {
+			onKeyDown(event)
+		}
+	}
+
+	const handleRemoveClick = (event: React.MouseEvent<HTMLElement>) => {
+		if (disabled) {
+			return
+		}
+		event.stopPropagation()
+		if (onRemove) {
+			onRemove(event)
+		}
+	}
+
+	const handleRemoveKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+		if (disabled) {
+			return
+		}
+
+		if (event.key === 'Enter' || event.key === ' ' || event.key === 'Backspace' || event.key === 'Delete') {
+			event.preventDefault()
+			event.stopPropagation()
+			if (onRemove) {
+				onRemove(event)
+			}
+		}
+	}
+
+	const leadingIcon =
+		startIcon ?? (isSelectable && isSelected ? selectedIcon ?? <CheckIcon className={styles.icon} /> : null)
+
+	const trailingIcon = isRemovable ? (
+		<IconButton
+			role="button"
+      variant={isSelected ? 'filled-weak' : 'outlined'}
+      className={cx('remove', styles.remove, styles['end-icon'])}
+			tabIndex={disabled ? -1 : 0}
+			disabled={disabled}
+			aria-label={removeLabel}
+			onClick={handleRemoveClick}
+			onKeyDown={handleRemoveKeyDown}
+		>
+			<CloseIcon className={styles.icon} />
+		</IconButton>
+	) : (
+		endIcon
+	)
+
+  const appliedVariant = isSelected ? 'filled' : 'outlined'
+ 
+
+	return (
+		<Comp
+			ref={ref}
+			type={asChild === true ? undefined : 'button'}
+			role={role ?? (asChild === true ? 'button' : undefined)}
+			tabIndex={disabled ? -1 : tabIndex ?? 0}
+			aria-disabled={disabled || undefined}
+			aria-pressed={isSelectable ? isSelected : undefined}
+			aria-selected={isSelectable ? isSelected : undefined}
+			className={cx(
+				'chip',
+				variant,
+				intent,
+				size,
+				{ selected: isSelected, disabled, removable: isRemovable },
+				styles.chip,
+				styles[appliedVariant],
+				styles[intent],
+				styles[size],
+				className
+			)}
+			disabled={asChild === true ? undefined : disabled}
+			onClick={handleClick}
+			onKeyDown={handleKeyDown}
+			{...restProps}
+		>
+			{leadingIcon != null && <span className={cx(styles.iconWrapper)}>{leadingIcon}</span>}
+			<span className={styles.label}>{children}</span>
+			{trailingIcon != null && <span className={cx(styles.iconWrapper)}>{trailingIcon}</span>}
+		</Comp>
+	)
+}
+
+Chip.displayName = 'Chip'

package/src/components/chips/index.ts

@@ -0,0 +1,2 @@
+export * from './chip.js'
+export * from './@types/chip.js'

package/src/icons/check-icon.tsx

@@ -10,7 +10,7 @@ import styles from './icons.module.css'
 
 export const CheckIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-current'], svgClassName)
-
+  console.log('CheckIcon className:', className)
   return (
     <IconElement className={cx('check-icon', className)} {...rest}>
       <svg

package/src/icons/close-icon.tsx

@@ -6,23 +6,24 @@ import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'
 
 export const CloseIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-current'], svgClassName)
+  const applied = cx(styles['stroke-current'], svgClassName)
 
   return (
     <IconElement className={cx('close-icon', className)} {...rest}>
-      <svg
+      <svg 
         className={applied}
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg" 
         focusable="false"
         aria-hidden="true"
-        viewBox="0 0 15 15"
-      >
-        <path
-          d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
-          fillRule="evenodd"
-          clipRule="evenodd"
-        ></path>
-      </svg>
+        viewBox="0 0 24 24" fill="none" 
+        strokeWidth="2" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+          <path d="M18 6l-12 12" />
+          <path d="M6 6l12 12" />
+        </svg>
     </IconElement>
   )
 }

package/src/icons/icon-element.tsx

@@ -14,15 +14,12 @@ export interface IconElementProps extends React.ComponentProps<'div'> {
 }
 
 export const IconElement = (props: IconElementProps): React.JSX.Element => {
-  const { className, children, width = '22px', height = '22px', menuItem = false, ...rest } = props
+  const { className, children, width, height, menuItem = false, ...rest } = props
   return (
     <div
       style={{
         width,
         height,
-        flex: `0 0 ${width}`,
-        alignItems: 'center',
-        justifyContent: 'center',
         marginRight: menuItem != null && menuItem ? '1.2rem' : '0',
       }}
       className={cx(styles['element-root'], className)}

package/src/icons/icons.module.css

@@ -2,6 +2,14 @@
 
 @layer infonomic-components {
 
+  .element-root {
+    width: 1.375rem;
+    height: 1.375rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .element-root svg {
     display: block;
     margin: auto;

package/src/react.ts

@@ -16,6 +16,7 @@ export * from './components/button/icon-button.js'
 export * from './components/card/card.js'
 export * from './components/container/container.js'
 export * from './components/dropdown/dropdown.js'
+export * from './components/chips/chip.js'
 export * from './components/hamburger/hamburger.js'
 export * from './components/forms/calendar.js'
 export * from './components/forms/checkbox.js'