Patches

.yarn/versions/01a3c776.yml

@@ -0,0 +1,6 @@
+releases:
+  "@essex/components": minor
+  essex-toolkit-stories: patch
+
+declined:
+  - essex-toolkit

packages/components/docs/components.api.md

@@ -240,7 +240,7 @@ export const MultiDropdown: React.FC<MultiDropdownProps>;
 // @public (undocumented)
 export interface MultiDropdownProps extends IDropdownProps {
     // (undocumented)
-    onChangeAll?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>, options: IDropdownOption[]) => void;
+    onChangeAll?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>, options?: IDropdownOption[], indexes?: number[]) => void;
 }
 
 // Warning: (ae-missing-release-tag) "NumberSpinButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

packages/components/src/ButtonChoiceGroup/ButtonChoiceGroup.tsx

@@ -13,13 +13,11 @@ import {
 	IconButton,
 	useTheme,
 } from '@fluentui/react'
-import { useThematic } from '@thematic/react'
 import { memo, useMemo } from 'react'
 
 export const ButtonChoiceGroup: React.FC<IChoiceGroupProps> = memo(
 	function ButtonChoiceGroup({ options, ...props }) {
 		const theme = useTheme()
-		const thematic = useThematic()
 		const choiceGroupStyles = useMemo(
 			() => ({
 				flexContainer: {
@@ -43,13 +41,13 @@ export const ButtonChoiceGroup: React.FC<IChoiceGroupProps> = memo(
 							root: {
 								margin: 'unset',
 								borderRadius: '2px',
-								backgroundColor: thematic.application().background().hex(),
+								backgroundColor: theme.palette.white,
 							},
 						},
 						onRenderField,
 					} as IChoiceGroupOption
 				}),
-			[options, thematic],
+			[options, theme],
 		)
 
 		return (

packages/components/src/CollapsiblePanel/CollapsiblePanel.tsx

@@ -4,8 +4,7 @@
  */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import AnimateHeight from '@essex/react-animate-height'
-import { IconButton } from '@fluentui/react'
-import { useThematicFluent } from '@thematic/fluent'
+import { IconButton, useTheme } from '@fluentui/react'
 import * as React from 'react'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 
@@ -31,7 +30,7 @@ export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
 		contents: {},
 	},
 }) => {
-	const theme = useThematicFluent()
+	const theme = useTheme()
 	const [expanded, setExpanded] = useState<boolean>(defaultExpanded)
 	const handleClick = useCallback(() => {
 		// if not controlled component, set local state
@@ -84,9 +83,7 @@ export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
 	}, [onRenderHeader, title])
 	const contentsStyle = useMemo(
 		() => ({
-			border: expanded
-				? `1px solid ${theme.application().faint().hex()}`
-				: 'none',
+			border: expanded ? `1px solid ${theme.palette.neutralLighter}` : 'none',
 			...styles.contents,
 		}),
 		[expanded, theme, styles.contents],
@@ -111,8 +108,7 @@ export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
 						iconProps={iconProps}
 						style={{
 							...IconButtonStyle,
-							color:
-								styles?.header?.color || theme.application().foreground().hex(),
+							color: styles?.header?.color || theme.palette.neutralPrimary,
 						}}
 					/>
 				</div>
@@ -194,16 +190,14 @@ const HeaderContainer: React.FC<{
 	onKeyDown,
 	style = {},
 }) {
-	const theme = useThematicFluent()
+	const theme = useTheme()
 	const _style = useMemo<React.CSSProperties>(() => {
-		const background = theme.application().faint().hex()
+		const background = theme.palette.neutralLighter
 		const borderTop = first
 			? ''
-			: `1px solid ${theme.application().lowContrast().hex()}`
+			: `1px solid ${theme.palette.neutralTertiaryAlt}`
 		const borderBottom =
-			last || expanded
-				? `1px solid ${theme.application().lowContrast().hex()}`
-				: ''
+			last || expanded ? `1px solid ${theme.palette.neutralTertiaryAlt}` : ''
 		return {
 			...HeaderContainerStyle,
 			background,

packages/components/src/ColumnarMenu/ColumnarMenu.stories.tsx

@@ -26,7 +26,7 @@ const data = [
 		key: `section-1`,
 		itemType: ContextualMenuItemType.Section,
 		sectionProps: {
-			title: 'Eletronics',
+			title: 'Electronics',
 			items: [
 				{
 					key: 'Laptop',
@@ -89,7 +89,7 @@ export const ColumnarMenuStory = () => {
 		onItemClick: () => alert('item clicked'),
 	}
 
-	return <ColumnarMenu text={'Eletronics and furniture list'} {...menuProps} />
+	return <ColumnarMenu text={'Electronics and furniture list'} {...menuProps} />
 }
 
 ColumnarMenuStory.story = {
@@ -112,7 +112,9 @@ export const ColumnarMenuStoryOverflow = () => {
 		onItemClick: () => alert('item clicked'),
 	}
 
-	return <ColumnarMenu text={'EletronicsAndFurnitureList.csv'} {...menuProps} />
+	return (
+		<ColumnarMenu text={'ElectronicsAndFurnitureList.csv'} {...menuProps} />
+	)
 }
 
 ColumnarMenuStoryOverflow.story = {

packages/components/src/ColumnarMenu/ColumnarMenuList.tsx

@@ -7,17 +7,16 @@ import type {
 	IContextualMenuItemProps,
 	IContextualMenuListProps,
 } from '@fluentui/react'
-import { ContextualMenuItemType, Separator } from '@fluentui/react'
-import { useThematicFluent } from '@thematic/fluent'
+import { ContextualMenuItemType, Separator, useTheme } from '@fluentui/react'
 import { merge } from 'lodash-es'
 import { memo, useCallback, useMemo } from 'react'
 
 export const ColumnarMenuList: React.FC<IContextualMenuListProps> = memo(
 	function ColumnarMenuList(props) {
-		const theme = useThematicFluent()
+		const theme = useTheme()
 		const headerStyle = useMemo(
 			() => ({
-				color: theme.application().accent().hex(),
+				color: theme.palette.themePrimary,
 				padding: '0 12px 0 12px',
 				marginBottom: '8',
 				fontWeight: 700,

packages/components/src/MultiDropdown/MultiDropdown.hooks.tsx

@@ -39,15 +39,20 @@ export function useOptionRenderer(
 			event: React.MouseEvent<
 				HTMLAnchorElement | HTMLButtonElement | HTMLElement
 			>,
-		) => onChangeAll?.(event, options),
+		) =>
+			onChangeAll?.(
+				event,
+				options.map(o => ({ ...o, selected: true })),
+				options.map((_o, i) => i),
+			),
 		[onChangeAll, options],
 	)
 	const handleSelectNone = useCallback(
 		(
 			event: React.MouseEvent<
 				HTMLAnchorElement | HTMLButtonElement | HTMLElement
 			>,
-		) => onChangeAll?.(event, []),
+		) => onChangeAll?.(event),
 		[onChangeAll],
 	)
 

packages/components/src/MultiDropdown/MultiDropdown.stories.tsx

@@ -21,7 +21,7 @@ const Template = (args: MultiDropdownProps) => {
 			setSelectedKeys(prev => {
 				return option?.selected
 					? [...prev, option?.key]
-					: prev.filter((d: string | number) => d === option?.key)
+					: prev.filter((d: string | number) => d !== option?.key)
 			})
 		},
 		[setSelectedKeys],
@@ -31,8 +31,8 @@ const Template = (args: MultiDropdownProps) => {
 			_event: React.MouseEvent<
 				HTMLAnchorElement | HTMLButtonElement | HTMLElement
 			>,
-			options: IDropdownOption[],
-		) => setSelectedKeys(options.map(opt => opt.key as string)),
+			options?: IDropdownOption[],
+		) => setSelectedKeys(options?.map(opt => opt.key as string) || []),
 		[setSelectedKeys],
 	)
 	return (

packages/components/src/MultiDropdown/MultiDropdown.types.ts

@@ -9,6 +9,7 @@ export interface MultiDropdownProps extends IDropdownProps {
 		event: React.MouseEvent<
 			HTMLAnchorElement | HTMLButtonElement | HTMLElement
 		>,
-		options: IDropdownOption[],
+		options?: IDropdownOption[],
+		indexes?: number[],
 	) => void
 }