npm - @persona/design-system - Versions diffs - 0.1.6 → 0.1.7 - Mend

@persona/design-system 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (597) hide show

package/dist/components/FormField/index.cjs CHANGED Viewed

@@ -5,27 +5,26 @@ Object.defineProperties(exports, {
 const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_Stack = require("../../Stack-BF-9YjA1.cjs");
 const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
-const require_useFormGroup = require("../../useFormGroup-DQJdKaL9.cjs");
-const require_useFormField = require("../../useFormField-BpYf3CAW.cjs");
-const require_Checkbox = require("../../Checkbox-B83WfsOZ.cjs");
-const require_Menu = require("../../Menu-BLbEcodU.cjs");
-const require_DropdownMenu = require("../../DropdownMenu-CeqZAxjs.cjs");
+const require_useFormGroup = require("../../useFormGroup-BE7v9eAj.cjs");
+const require_useFormField = require("../../useFormField-B98dmreO.cjs");
 const require_components_Input_index = require("../Input/index.cjs");
-const require_Combobox = require("../../Combobox-R3_NDBi3.cjs");
-const require_Select = require("../../Select-CowngLd7.cjs");
-const require_Toggle = require("../../Toggle-7o-n5vF6.cjs");
-const require_FormControl = require("../../FormControl-DjxkL5Ft.cjs");
-const require_RadioGroup = require("../../RadioGroup-D28hdlhz.cjs");
-const require_SegmentedControl = require("../../SegmentedControl-DTkFgjac.cjs");
-const require_TextArea = require("../../TextArea-p3oek3Zq.cjs");
-const require_ListBox = require("../../ListBox-B4uoo_PT.cjs");
-const require_TableBox = require("../../TableBox-D_B9atn2.cjs");
+const require_DropdownMenu = require("../../DropdownMenu-CfJxgWN5.cjs");
+const require_Checkbox = require("../../Checkbox-DhxpxzGp.cjs");
+const require_Combobox = require("../../Combobox-4Bi9-N1p.cjs");
+const require_Select = require("../../Select-C65bfYeT.cjs");
+const require_Toggle = require("../../Toggle-CTtrhzsV.cjs");
+const require_FormControl = require("../../FormControl-Czt95h2L.cjs");
+const require_RadioGroup = require("../../RadioGroup-DmGVJCgT.cjs");
+const require_SegmentedControl = require("../../SegmentedControl-CIJz0oxY.cjs");
+const require_TextArea = require("../../TextArea-DVHi0K7M.cjs");
+const require_ListBox = require("../../ListBox-BCscLcYL.cjs");
+const require_TableBox = require("../../TableBox-DO-yToJk.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _persona_icons = require("@persona/icons");
-let react_aria = require("react-aria");
 let lodash_fp_js = require("lodash/fp.js");
+let react_aria = require("react-aria");
 let react_stately = require("react-stately");
 let react_innertext = require("react-innertext");
 react_innertext = require_chunk.__toESM(react_innertext);
@@ -330,7 +329,7 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {})
 				}),
 				portal: true,
-				children: menuActions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+				children: menuActions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
 					...action,
 					onClick: () => action.onClick(selectedKeys),
 					size: effectiveSize,
@@ -342,7 +341,7 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 				trigger: addButton,
 				align: "start",
 				portal: true,
-				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
 					...option,
 					onClick: () => addDropdownConfig.onSelection(option.value),
 					size: effectiveSize,
@@ -366,6 +365,7 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 };
 //#endregion
 //#region components/FormField/TableBoxField.tsx
+const isActionGroup = (action) => "type" in action && action.type === "group";
 const TableBoxField = ({ label, helperText, errorText, warningText, labelProps: labelPropsProp, helperProps, errorProps, warningProps, inputId, onAdd, onDelete, deleteDisabled, configField: configFieldProp = true, actions = [], addDropdownConfig, selectedKey: selectedKeyProp, onSelectionChange, defaultSelectedKey, selectionMode, disabled, createNewRow, children, emptyText = "No data", ...props }) => {
 	const { configField } = require_useFormGroup.useFormGroup({ configField: configFieldProp });
 	const menuActions = [...actions];
@@ -388,6 +388,7 @@ const TableBoxField = ({ label, helperText, errorText, warningText, labelProps:
 		onClick: () => selectedKey && onDelete(selectedKey),
 		disabled: deleteDisabled || selectedKey == null
 	});
+	const visibleMenuActions = menuActions.filter((action) => !isActionGroup(action) || action.actions.length > 0);
 	const addButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
 		size: "sm",
 		onClick: handleAddClick,
@@ -406,7 +407,7 @@ const TableBoxField = ({ label, helperText, errorText, warningText, labelProps:
 		warningProps,
 		inputId,
 		rightActions: configField && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			menuActions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+			visibleMenuActions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
 				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
 					"aria-label": "Actions",
 					size: "sm",
@@ -414,19 +415,36 @@ const TableBoxField = ({ label, helperText, errorText, warningText, labelProps:
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {})
 				}),
 				portal: true,
-				children: menuActions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
-					...action,
-					disabled: disabled || action.disabled,
-					onClick: () => action.onClick(selectedKey),
-					size: "sm",
-					children: action.label
-				}, action.label))
+				children: visibleMenuActions.map((entry, entryIndex) => {
+					const previousEntry = visibleMenuActions[entryIndex - 1];
+					if (isActionGroup(entry)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+						entryIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Divider, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Heading, {
+							size: "sm",
+							children: entry.heading
+						}),
+						entry.actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
+							...action,
+							disabled: disabled || action.disabled,
+							onClick: () => action.onClick(selectedKey),
+							size: "sm",
+							children: action.label
+						}, action.label))
+					] }, `${entry.heading}-${entryIndex}`);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [previousEntry && isActionGroup(previousEntry) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Divider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
+						...entry,
+						disabled: disabled || entry.disabled,
+						onClick: () => entry.onClick(selectedKey),
+						size: "sm",
+						children: entry.label
+					})] }, `${entry.label}-${entryIndex}`);
+				})
 			}),
 			(onAdd || createNewRow) && !addDropdownConfig && addButton,
 			addDropdownConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
 				trigger: addButton,
 				portal: true,
-				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
 					...option,
 					onClick: () => addDropdownConfig.onSelection(option.value),
 					size: "sm",

package/dist/components/FormField/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","names":["useFormGroup","FormLabel","FormControl","HStack","Spacing","FormInputContainer","HelperText","WarningText","ErrorText","Input","TextArea","Select","RadioGroup","Checkbox","Toggle","SegmentedControl","Combobox","FormControlContext","Children","useFormGroup","IconButton","PlusIcon","DropdownMenu","MoreIcon","MenuItem","ListBox","useFormGroup","IconButton","PlusIcon","DropdownMenu","MoreIcon","MenuItem","TableBox"],"sources":["../../../components/FormField/FormField.tsx","../../../components/FormField/inputFields.tsx","../../../components/FormField/CheckboxGroupField.tsx","../../../components/FormField/ListBoxField.tsx","../../../components/FormField/TableBoxField.tsx"],"sourcesContent":["import { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n ErrorText,\n type FormControlProps,\n FormInputContainer,\n FormLabel,\n HelperText,\n WarningText,\n} from 'design-system/components/FormControl';\nimport { HStack } from 'design-system/components/Stack';\n\nexport interface FormFieldBaseProps {\n /*\n Renders `<Label>` above input\n /\n label?: ReactNode;\n\n /\n ID of the input element. Providing this will automatically link the label to the input.\n /\n inputId?: string;\n\n /\n Renders `<HelperText>` below input\n /\n helperText?: ReactNode;\n\n /\n Renders `<ErrorText>` below input and helper text.\n /\n errorText?: ReactNode;\n\n /\n Renders `<WarningText>` below input and helper text.\n /\n warningText?: ReactNode;\n\n /\n Should be an input of some sort\n /\n children?: ReactElement;\n\n labelProps?: ComponentPropsWithRef<typeof FormLabel>;\n helperProps?: ComponentPropsWithRef<typeof HelperText>;\n warningProps?: ComponentPropsWithRef<typeof WarningText>;\n errorProps?: ComponentPropsWithRef<typeof ErrorText>;\n\n /\n Whether to render the form field as a config field.\n * This will render the helper text as a tooltip.\n /\n configField?: boolean;\n\n /\n Override the width of the input area when `configField` is true.\n * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n * Defaults to `'50%'`.\n /\n configFieldInputWidth?: string;\n\n /\n Renders actions to the right of the label.\n /\n rightActions?: ReactNode;\n}\n\nexport interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}\n\n/\n > Please do not use in production! This component is subject to API and style changes.\n \n Helper components with preset slots for label, input, and helper texts.\n * Fully composed components with different form input types are available.\n * This is the recommended way to implement form elements.\n * You can use `<FormControl>` if you require more flexibility.\n \n ## Usage\n \n ```tsx\n * import FormField from 'design-system/components/FormField';\n * ```\n /\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n {\n label,\n children,\n helperText,\n warningText,\n errorText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField: configFieldProp,\n configFieldInputWidth,\n rightActions,\n ...props\n }: FormFieldProps,\n ref,\n) {\n const { configField: configFieldFormGroup } = useFormGroup();\n const configField = configFieldProp ?? configFieldFormGroup;\n\n const labelElement = label ? (\n <FormLabel tooltip={configField && helperText ? helperText : undefined} {...labelProps}>\n {label}\n </FormLabel>\n ) : null;\n\n return (\n <FormControl\n hasError={!!errorText}\n hasWarning={!!warningText}\n ref={ref}\n configField={configField}\n hasRightActions={!!rightActions}\n configFieldInputWidth={configFieldInputWidth}\n {...props}\n >\n {rightActions ? (\n <HStack justify='space-between' align='center'>\n {labelElement}\n <HStack spacing={Spacing[1]}>{rightActions}</HStack>\n </HStack>\n ) : (\n labelElement\n )}\n <FormInputContainer>{children}</FormInputContainer>\n {!configField && helperText && <HelperText {...helperProps}>{helperText}</HelperText>}\n {!configField && warningText && <WarningText {...warningProps}>{warningText}</WarningText>}\n {!configField && errorText && <ErrorText {...errorProps}>{errorText}</ErrorText>}\n </FormControl>\n );\n});\n\nexport default FormField;\n","import { uniqueId } from 'lodash/fp';\nimport { forwardRef, useMemo } from 'react';\n\nimport Checkbox, { type CheckboxProps } from 'design-system/components/Checkbox';\nimport Combobox from 'design-system/components/Combobox';\nimport type { ComboboxMultiSelectProps } from 'design-system/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from 'design-system/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from 'design-system/components/FormField/FormField';\nimport Input, { type InputProps } from 'design-system/components/Input';\nimport RadioGroup, { type RadioGroupProps } from 'design-system/components/RadioGroup';\nimport SegmentedControl, {\n type SegmentedControlProps,\n} from 'design-system/components/SegmentedControl';\nimport Select, { type SelectProps } from 'design-system/components/Select';\nimport TextArea, { type TextAreaProps } from 'design-system/components/TextArea';\nimport Toggle, { type ToggleProps } from 'design-system/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n T,\n \| 'label'\n \| 'inputId'\n \| 'helperText'\n \| 'errorText'\n \| 'warningText'\n \| 'labelProps'\n \| 'helperProps'\n \| 'warningProps'\n \| 'errorProps'\n \| 'configField'\n \| 'configFieldInputWidth'\n \| 'rightActions'\n>;\ntype OmitFormFieldProps<T extends ImplementsFormField> = Omit<T, keyof ExtractFormFieldProps<T>>;\n\n/\n Helper to split out props that are sent to the FormField component from props sent\n * to the underlying input component.\n /\nexport const splitOutFormFieldProps = <T extends ImplementsFormField>(\n props: T,\n): {\n formFieldProps: ExtractFormFieldProps<T>;\n inputProps: OmitFormFieldProps<T>;\n} => {\n const {\n label,\n inputId,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField,\n configFieldInputWidth,\n rightActions,\n ...inputProps\n } = props;\n\n return {\n formFieldProps: {\n label,\n inputId,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField,\n configFieldInputWidth,\n rightActions,\n },\n inputProps,\n };\n};\n\nexport interface TextFieldProps extends ImplementsFormField, InputProps {}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n function TextField(props, ref) {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n const { id, ...rest } = inputProps;\n\n return (\n <FormField\n {...formFieldProps}\n labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n inputId={formFieldProps.inputId ?? id}\n >\n <Input {...rest} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface TextAreaFieldProps extends ImplementsFormField, TextAreaProps {}\n\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n function TextAreaField(\n { label, helperText, errorText, warningText, inputId, id, configField, ...props },\n ref,\n ) {\n return (\n <FormField\n inputId={inputId ?? id}\n label={label}\n labelProps={{ size: props.size }}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <TextArea {...props} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface SelectFieldProps extends ImplementsFormField, SelectProps {}\n\nexport const SelectField = ({\n id,\n label,\n helperText,\n errorText,\n warningText,\n children,\n configField,\n labelProps,\n ...props\n}: SelectFieldProps) => {\n const linkedId = useMemo(() => id ?? uniqueId('pds-form-field-input-fields-select__'), [id]);\n\n return (\n <FormField\n label={label}\n labelProps={{ htmlFor: linkedId, size: props.size, ...labelProps }}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Select {...props} id={linkedId}>\n {children}\n </Select>\n </FormField>\n );\n};\n\nexport interface RadioGroupFieldProps\n extends Omit<ImplementsFormField, 'configField'>, RadioGroupProps {}\n\nexport const RadioGroupField = ({\n label,\n helperText,\n errorText,\n warningText,\n children,\n ...props\n}: RadioGroupFieldProps) => {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n >\n <RadioGroup {...props}>{children}</RadioGroup>\n </FormField>\n );\n};\n\nexport interface CheckboxFieldProps extends ImplementsFormField, CheckboxProps {\n checkboxLabel?: CheckboxProps['label'];\n}\n\nexport const CheckboxField = ({\n label,\n helperText,\n errorText,\n warningText,\n checkboxLabel,\n configField,\n labelProps,\n ...props\n}: CheckboxFieldProps) => {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n labelProps={labelProps}\n >\n <Checkbox label={checkboxLabel} {...props} />\n </FormField>\n );\n};\n\nexport interface ToggleFieldProps extends ImplementsFormField, ToggleProps {}\n\nexport const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(function ToggleField(\n { label, helperText, errorText, warningText, configField, ...props },\n ref,\n) {\n return (\n <FormField\n label={label}\n labelProps={{ size: props.size }}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Toggle {...props} ref={ref} />\n </FormField>\n );\n});\n\nexport interface SegmentedControlFieldProps\n extends ImplementsFormField, Omit<SegmentedControlProps, 'children'> {\n children?: SegmentedControlProps['children'];\n}\n\nexport const SegmentedControlField = forwardRef<HTMLDivElement, SegmentedControlFieldProps>(\n function SegmentedControlField(\n { label, helperText, errorText, warningText, configField, children, labelProps, ...props },\n ref,\n ) {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n labelProps={labelProps}\n >\n <SegmentedControl fullWidth {...props} ref={ref}>\n {children}\n </SegmentedControl>\n </FormField>\n );\n },\n);\n\nexport type ComboboxSingleSelectFieldProps<T = string> = ImplementsFormField &\n ComboboxSingleSelectProps<T>;\nexport type ComboboxMultiSelectFieldProps<T = string> = ImplementsFormField &\n ComboboxMultiSelectProps<T>;\n\nexport const ComboboxField = ({\n label,\n labelProps,\n helperText,\n errorText,\n warningText,\n configField,\n ...props\n}: ComboboxSingleSelectFieldProps \| ComboboxMultiSelectFieldProps) => {\n return (\n <FormField\n label={label}\n labelProps={labelProps}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Combobox {...props} />\n </FormField>\n );\n};\n","import {\n Children,\n cloneElement,\n type ComponentPropsWithRef,\n createContext,\n type ReactElement,\n type ReactNode,\n useContext,\n useRef,\n} from 'react';\nimport {\n type AriaCheckboxGroupProps,\n mergeProps,\n useCheckboxGroup,\n useCheckboxGroupItem,\n} from 'react-aria';\nimport innerText from 'react-innertext';\nimport { type CheckboxGroupState, useCheckboxGroupState } from 'react-stately';\n\nimport type { CheckboxProps } from 'design-system/components/Checkbox';\nimport type Checkbox from 'design-system/components/Checkbox';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst CheckboxGroupContext = createContext<CheckboxGroupState>(null);\n\n/* Preserves the parent FormControl context (disabled, hasError, etc.) but clears\n * inputId so each Checkbox inside the group generates its own unique id. /\nconst ClearGroupInputId = ({ children }: { children: ReactNode }) => {\n const parentContext = useContext(FormControlContext);\n return (\n <FormControlContext.Provider value={{ ...parentContext, inputId: undefined }}>\n {children}\n </FormControlContext.Provider>\n );\n};\n\ninterface CheckboxGroupItemProps {\n children: ReactElement<ComponentPropsWithRef<typeof Checkbox>>;\n}\n\nconst CheckboxGroupItem = (props: CheckboxGroupItemProps) => {\n const { children } = props;\n const checkboxProps = children.props;\n\n const state = useContext(CheckboxGroupContext);\n const ref = useRef();\n const { inputProps } = useCheckboxGroupItem(\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n {\n ...checkboxProps,\n onChange: undefined,\n isDisabled: checkboxProps.disabled,\n isReadOnly: checkboxProps.readOnly,\n isRequired: checkboxProps.required,\n isIndeterminate: checkboxProps.indeterminate,\n value: String(children.props.value),\n 'aria-label': innerText(checkboxProps.label),\n },\n state,\n ref,\n );\n\n return cloneElement(\n children,\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n mergeProps(inputProps, {\n onChange: checkboxProps.onChange,\n disabled: state.isDisabled \|\| checkboxProps.disabled,\n checked: state.isSelected(String(inputProps.value)),\n ref,\n } as ComponentPropsWithRef<typeof Checkbox>),\n );\n};\n\ninterface CheckboxGroupFieldProps\n extends\n Omit<ImplementsFormField, 'configField'>,\n Omit<\n AriaCheckboxGroupProps,\n 'description' \| 'disabled' \| 'isReadOnly' \| 'isRequired' \| 'errorMessage'\n > {\n children?: ReactElement<CheckboxProps>[];\n disabled?: boolean;\n readOnly?: boolean;\n required?: boolean;\n}\n\nconst CheckboxGroupField = ({\n children,\n name,\n onChange,\n disabled,\n readOnly,\n required,\n ...props\n}: CheckboxGroupFieldProps) => {\n const reactAriaProps = {\n ...props,\n description: props.helperText,\n errorMessage: props.errorText,\n onChange,\n name,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n };\n const state = useCheckboxGroupState(reactAriaProps);\n const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(\n reactAriaProps,\n state,\n );\n\n return (\n <FormField\n labelProps={labelProps}\n helperProps={descriptionProps}\n errorProps={errorMessageProps}\n disabled={disabled}\n {...groupProps}\n {...props}\n >\n <ClearGroupInputId>\n <CheckboxGroupContext.Provider value={state}>\n {Children.map(children, (checkbox) => (\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n <CheckboxGroupItem>{checkbox}</CheckboxGroupItem>\n ))}\n </CheckboxGroupContext.Provider>\n </ClearGroupInputId>\n </FormField>\n );\n};\n\nexport default CheckboxGroupField;\n","import { type ReactNode, useState } from 'react';\n\nimport { MoreIcon, PlusIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from 'design-system/components/ListBox';\nimport { MenuItem, type MenuItemProps } from 'design-system/components/Menu';\n\ninterface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n label: string;\n onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;\n}\n\ninterface AddDropdownConfig {\n options: ({ label: ReactNode; value: string } & Omit<MenuItemProps, 'children'>)[];\n onSelection: (value: string) => void;\n}\n\ninterface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {\n actions?: ListBoxFieldAction[];\n addDropdownConfig?: AddDropdownConfig;\n}\n\nconst ListBoxField = <T extends object>({\n label,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n errorProps,\n warningProps,\n inputId,\n onAdd,\n onDelete,\n deleteDisabled,\n configField: configFieldProp,\n size = 'md',\n actions = [],\n addDropdownConfig,\n selectedKeys: selectedKeysProp,\n onSelectionChange,\n defaultSelectedKeys,\n ...props\n}: ListBoxFieldProps<T>) => {\n const { configField } = useFormGroup({ configField: configFieldProp });\n const menuActions: ListBoxFieldAction[] = [...actions];\n const [selectedKeysState, setSelectedKeys] = useState(defaultSelectedKeys);\n const selectedKeys = selectedKeysProp ?? selectedKeysState;\n const effectiveSize = configField ? 'sm' : size;\n\n if (onDelete) {\n menuActions.unshift({\n label: 'Delete',\n onClick: () => onDelete(selectedKeys),\n disabled:\n deleteDisabled \|\|\n selectedKeys == null \|\|\n (typeof selectedKeys === 'object' && [...selectedKeys].length === 0),\n });\n }\n\n const addButton = (\n <IconButton size='sm' onClick={onAdd} aria-label='Add item to list'>\n <PlusIcon />\n </IconButton>\n );\n\n return (\n <FormField\n label={label}\n helperText={helperText}\n errorText={errorText}\n warningText={warningText}\n labelProps={labelProps}\n helperProps={helperProps}\n errorProps={errorProps}\n warningProps={warningProps}\n inputId={inputId}\n configField={configField}\n rightActions={\n configField && (\n <>\n {menuActions.length > 0 && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions' size='sm'>\n <MoreIcon />\n </IconButton>\n }\n portal\n >\n {menuActions.map((action) => (\n <MenuItem\n key={action.label}\n {...action}\n onClick={() => action.onClick(selectedKeys)}\n size={effectiveSize}\n >\n {action.label}\n </MenuItem>\n ))}\n </DropdownMenu>\n )}\n {onAdd && !addDropdownConfig && addButton}\n {addDropdownConfig && (\n <DropdownMenu trigger={addButton} align='start' portal>\n {addDropdownConfig.options.map((option) => (\n <MenuItem\n key={option.value}\n {...option}\n onClick={() => addDropdownConfig.onSelection(option.value)}\n size={effectiveSize}\n >\n {option.label}\n </MenuItem>\n ))}\n </DropdownMenu>\n )}\n </>\n )\n }\n >\n <ListBox\n id={inputId}\n fullWidth={configField}\n size={effectiveSize}\n deleteDisabled={deleteDisabled}\n // We have to control the keys so we can power the `rightActions`\n selectedKeys={selectedKeys}\n onSelectionChange={(keys) => {\n onSelectionChange?.(keys);\n setSelectedKeys(keys);\n }}\n {...props}\n />\n </FormField>\n );\n};\n\nexport default ListBoxField;\n","import { type MouseEvent, type ReactNode, useState } from 'react';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport { useFormGroup } from '@persona/design-system/components/ConfigFormGroup';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport type { FormLabelProps } from '@persona/design-system/components/FormControl';\nimport { MenuItem, type MenuItemProps } from '@persona/design-system/components/Menu';\nimport TableBox, { type TableBoxProps } from '@persona/design-system/components/TableBox';\nimport { MoreIcon, PlusIcon } from '@persona/icons';\n\nimport FormField from './FormField';\nimport type { ImplementsFormField } from './inputFields';\n\ninterface TableBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n label: string;\n onClick: (selectedKey: TableBoxProps['selectedKey']) => void;\n}\n\ninterface AddDropdownConfig {\n options: Array<{ label: string; value: string }>;\n onSelection: (value: string) => void;\n}\n\ninterface TableBoxFieldProps<T extends object = object>\n extends ImplementsFormField, Omit<TableBoxProps<T>, 'aria-label' \| 'onCreateNewRow'> {\n onAdd?: (e: MouseEvent<HTMLButtonElement>) => void;\n onDelete?: (selectedKey: string \| null) => void;\n deleteDisabled?: boolean;\n actions?: TableBoxFieldAction[];\n addDropdownConfig?: AddDropdownConfig;\n\n /\n Callback to create a new row and add it to the rows array\n * Should return the id of the newly created row\n */\n createNewRow?: () => string;\n children?: ReactNode;\n}\n\nconst TableBoxField = <T extends object = object>({\n label,\n helperText,\n errorText,\n warningText,\n labelProps: labelPropsProp,\n helperProps,\n errorProps,\n warningProps,\n inputId,\n onAdd,\n onDelete,\n deleteDisabled,\n configField: configFieldProp = true,\n actions = [],\n addDropdownConfig,\n selectedKey: selectedKeyProp,\n onSelectionChange,\n defaultSelectedKey,\n selectionMode,\n disabled,\n createNewRow,\n children,\n emptyText = 'No data',\n ...props\n}: TableBoxFieldProps<T>) => {\n const { configField } = useFormGroup({ configField: configFieldProp });\n const menuActions: TableBoxFieldAction[] = [...actions];\n const [selectedKeyState, setSelectedKey] = useState(defaultSelectedKey);\n const selectedKey = selectedKeyProp ?? selectedKeyState;\n const [newRowId, setNewRowId] = useState<string \| null>(null);\n const labelProps: FormLabelProps = { size: 'sm', ...labelPropsProp };\n\n const handleCreateNewRow = () => {\n if (createNewRow) {\n setNewRowId(createNewRow());\n }\n };\n\n // Handle add button click\n const handleAddClick = (e: MouseEvent<HTMLButtonElement>) => {\n if (createNewRow) {\n handleCreateNewRow();\n } else if (onAdd) {\n onAdd(e);\n }\n };\n\n if (onDelete) {\n menuActions.unshift({\n label: 'Delete',\n onClick: () => selectedKey && onDelete(selectedKey),\n disabled: deleteDisabled \|\| selectedKey == null,\n });\n }\n\n const addButton = (\n <IconButton\n size='sm'\n onClick={handleAddClick}\n aria-label='Add item to table'\n disabled={disabled}\n >\n <PlusIcon />\n </IconButton>\n );\n\n return (\n <FormField\n label={label}\n helperText={helperText}\n errorText={errorText}\n warningText={warningText}\n labelProps={labelProps}\n helperProps={helperProps}\n errorProps={errorProps}\n warningProps={warningProps}\n inputId={inputId}\n rightActions={\n configField && (\n <>\n {menuActions.length > 0 && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions' size='sm' disabled={disabled}>\n <MoreIcon />\n </IconButton>\n }\n portal\n >\n {menuActions.map((action) => (\n <MenuItem\n key={action.label}\n {...action}\n disabled={disabled \|\| action.disabled}\n onClick={() => action.onClick(selectedKey)}\n size='sm'\n >\n {action.label}\n </MenuItem>\n ))}\n </DropdownMenu>\n )}\n {(onAdd \|\| createNewRow) && !addDropdownConfig && addButton}\n {addDropdownConfig && (\n <DropdownMenu trigger={addButton} portal>\n {addDropdownConfig.options.map((option) => (\n <MenuItem\n key={option.value}\n {...option}\n onClick={() => addDropdownConfig.onSelection(option.value)}\n size='sm'\n >\n {option.label}\n </MenuItem>\n ))}\n </DropdownMenu>\n )}\n </>\n )\n }\n >\n <TableBox\n aria-label={`${label} table`}\n // We have to control the keys so we can power the `rightActions`\n selectedKey={selectedKey}\n onSelectionChange={(key) => {\n onSelectionChange?.(key);\n setSelectedKey(key);\n }}\n selectionMode={selectionMode}\n newRowId={newRowId}\n onCreateNewRow={createNewRow ? handleCreateNewRow : undefined}\n emptyText={emptyText}\n disabled={disabled}\n {...props}\n >\n {children}\n </TableBox>\n </FormField>\n );\n};\n\n// Attach subcomponents to TableBoxField\nTableBoxField.Row = TableBox.Row;\nTableBoxField.Cell = TableBox.Cell;\n\nexport default TableBoxField;\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","names":["useFormGroup","FormLabel","FormControl","HStack","Spacing","FormInputContainer","HelperText","WarningText","ErrorText","Input","TextArea","Select","RadioGroup","Checkbox","Toggle","SegmentedControl","Combobox","FormControlContext","Children","useFormGroup","IconButton","PlusIcon","DropdownMenu","MoreIcon","ListBox","useFormGroup","IconButton","PlusIcon","DropdownMenu","MoreIcon","Fragment","TableBox"],"sources":["../../../components/FormField/FormField.tsx","../../../components/FormField/inputFields.tsx","../../../components/FormField/CheckboxGroupField.tsx","../../../components/FormField/ListBoxField.tsx","../../../components/FormField/TableBoxField.tsx"],"sourcesContent":["import { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n ErrorText,\n type FormControlProps,\n FormInputContainer,\n FormLabel,\n HelperText,\n WarningText,\n} from 'design-system/components/FormControl';\nimport { HStack } from 'design-system/components/Stack';\n\nexport interface FormFieldBaseProps {\n /*\n Renders `<Label>` above input\n /\n label?: ReactNode;\n\n /\n ID of the input element. Providing this will automatically link the label to the input.\n /\n inputId?: string;\n\n /\n Renders `<HelperText>` below input\n /\n helperText?: ReactNode;\n\n /\n Renders `<ErrorText>` below input and helper text.\n /\n errorText?: ReactNode;\n\n /\n Renders `<WarningText>` below input and helper text.\n /\n warningText?: ReactNode;\n\n /\n Should be an input of some sort\n /\n children?: ReactElement;\n\n labelProps?: ComponentPropsWithRef<typeof FormLabel>;\n helperProps?: ComponentPropsWithRef<typeof HelperText>;\n warningProps?: ComponentPropsWithRef<typeof WarningText>;\n errorProps?: ComponentPropsWithRef<typeof ErrorText>;\n\n /\n Whether to render the form field as a config field.\n * This will render the helper text as a tooltip.\n /\n configField?: boolean;\n\n /\n Override the width of the input area when `configField` is true.\n * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n * Defaults to `'50%'`.\n /\n configFieldInputWidth?: string;\n\n /\n Renders actions to the right of the label.\n /\n rightActions?: ReactNode;\n}\n\nexport interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}\n\n/\n > Please do not use in production! This component is subject to API and style changes.\n \n Helper components with preset slots for label, input, and helper texts.\n * Fully composed components with different form input types are available.\n * This is the recommended way to implement form elements.\n * You can use `<FormControl>` if you require more flexibility.\n \n ## Usage\n \n ```tsx\n * import FormField from 'design-system/components/FormField';\n * ```\n /\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n {\n label,\n children,\n helperText,\n warningText,\n errorText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField: configFieldProp,\n configFieldInputWidth,\n rightActions,\n ...props\n }: FormFieldProps,\n ref,\n) {\n const { configField: configFieldFormGroup } = useFormGroup();\n const configField = configFieldProp ?? configFieldFormGroup;\n\n const labelElement = label ? (\n <FormLabel tooltip={configField && helperText ? helperText : undefined} {...labelProps}>\n {label}\n </FormLabel>\n ) : null;\n\n return (\n <FormControl\n hasError={!!errorText}\n hasWarning={!!warningText}\n ref={ref}\n configField={configField}\n hasRightActions={!!rightActions}\n configFieldInputWidth={configFieldInputWidth}\n {...props}\n >\n {rightActions ? (\n <HStack justify='space-between' align='center'>\n {labelElement}\n <HStack spacing={Spacing[1]}>{rightActions}</HStack>\n </HStack>\n ) : (\n labelElement\n )}\n <FormInputContainer>{children}</FormInputContainer>\n {!configField && helperText && <HelperText {...helperProps}>{helperText}</HelperText>}\n {!configField && warningText && <WarningText {...warningProps}>{warningText}</WarningText>}\n {!configField && errorText && <ErrorText {...errorProps}>{errorText}</ErrorText>}\n </FormControl>\n );\n});\n\nexport default FormField;\n","import { uniqueId } from 'lodash/fp';\nimport { forwardRef, useMemo } from 'react';\n\nimport Checkbox, { type CheckboxProps } from 'design-system/components/Checkbox';\nimport Combobox from 'design-system/components/Combobox';\nimport type { ComboboxMultiSelectProps } from 'design-system/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from 'design-system/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from 'design-system/components/FormField/FormField';\nimport Input, { type InputProps } from 'design-system/components/Input';\nimport RadioGroup, { type RadioGroupProps } from 'design-system/components/RadioGroup';\nimport SegmentedControl, {\n type SegmentedControlProps,\n} from 'design-system/components/SegmentedControl';\nimport Select, { type SelectProps } from 'design-system/components/Select';\nimport TextArea, { type TextAreaProps } from 'design-system/components/TextArea';\nimport Toggle, { type ToggleProps } from 'design-system/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n T,\n \| 'label'\n \| 'inputId'\n \| 'helperText'\n \| 'errorText'\n \| 'warningText'\n \| 'labelProps'\n \| 'helperProps'\n \| 'warningProps'\n \| 'errorProps'\n \| 'configField'\n \| 'configFieldInputWidth'\n \| 'rightActions'\n>;\ntype OmitFormFieldProps<T extends ImplementsFormField> = Omit<T, keyof ExtractFormFieldProps<T>>;\n\n/\n Helper to split out props that are sent to the FormField component from props sent\n * to the underlying input component.\n /\nexport const splitOutFormFieldProps = <T extends ImplementsFormField>(\n props: T,\n): {\n formFieldProps: ExtractFormFieldProps<T>;\n inputProps: OmitFormFieldProps<T>;\n} => {\n const {\n label,\n inputId,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField,\n configFieldInputWidth,\n rightActions,\n ...inputProps\n } = props;\n\n return {\n formFieldProps: {\n label,\n inputId,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n warningProps,\n errorProps,\n configField,\n configFieldInputWidth,\n rightActions,\n },\n inputProps,\n };\n};\n\nexport interface TextFieldProps extends ImplementsFormField, InputProps {}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n function TextField(props, ref) {\n const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n const { id, ...rest } = inputProps;\n\n return (\n <FormField\n {...formFieldProps}\n labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n inputId={formFieldProps.inputId ?? id}\n >\n <Input {...rest} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface TextAreaFieldProps extends ImplementsFormField, TextAreaProps {}\n\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n function TextAreaField(\n { label, helperText, errorText, warningText, inputId, id, configField, ...props },\n ref,\n ) {\n return (\n <FormField\n inputId={inputId ?? id}\n label={label}\n labelProps={{ size: props.size }}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <TextArea {...props} ref={ref} />\n </FormField>\n );\n },\n);\n\nexport interface SelectFieldProps extends ImplementsFormField, SelectProps {}\n\nexport const SelectField = ({\n id,\n label,\n helperText,\n errorText,\n warningText,\n children,\n configField,\n labelProps,\n ...props\n}: SelectFieldProps) => {\n const linkedId = useMemo(() => id ?? uniqueId('pds-form-field-input-fields-select__'), [id]);\n\n return (\n <FormField\n label={label}\n labelProps={{ htmlFor: linkedId, size: props.size, ...labelProps }}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Select {...props} id={linkedId}>\n {children}\n </Select>\n </FormField>\n );\n};\n\nexport interface RadioGroupFieldProps\n extends Omit<ImplementsFormField, 'configField'>, RadioGroupProps {}\n\nexport const RadioGroupField = ({\n label,\n helperText,\n errorText,\n warningText,\n children,\n ...props\n}: RadioGroupFieldProps) => {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n >\n <RadioGroup {...props}>{children}</RadioGroup>\n </FormField>\n );\n};\n\nexport interface CheckboxFieldProps extends ImplementsFormField, CheckboxProps {\n checkboxLabel?: CheckboxProps['label'];\n}\n\nexport const CheckboxField = ({\n label,\n helperText,\n errorText,\n warningText,\n checkboxLabel,\n configField,\n labelProps,\n ...props\n}: CheckboxFieldProps) => {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n labelProps={labelProps}\n >\n <Checkbox label={checkboxLabel} {...props} />\n </FormField>\n );\n};\n\nexport interface ToggleFieldProps extends ImplementsFormField, ToggleProps {}\n\nexport const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(function ToggleField(\n { label, helperText, errorText, warningText, configField, ...props },\n ref,\n) {\n return (\n <FormField\n label={label}\n labelProps={{ size: props.size }}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Toggle {...props} ref={ref} />\n </FormField>\n );\n});\n\nexport interface SegmentedControlFieldProps\n extends ImplementsFormField, Omit<SegmentedControlProps, 'children'> {\n children?: SegmentedControlProps['children'];\n}\n\nexport const SegmentedControlField = forwardRef<HTMLDivElement, SegmentedControlFieldProps>(\n function SegmentedControlField(\n { label, helperText, errorText, warningText, configField, children, labelProps, ...props },\n ref,\n ) {\n return (\n <FormField\n label={label}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n labelProps={labelProps}\n >\n <SegmentedControl fullWidth {...props} ref={ref}>\n {children}\n </SegmentedControl>\n </FormField>\n );\n },\n);\n\nexport type ComboboxSingleSelectFieldProps<T = string> = ImplementsFormField &\n ComboboxSingleSelectProps<T>;\nexport type ComboboxMultiSelectFieldProps<T = string> = ImplementsFormField &\n ComboboxMultiSelectProps<T>;\n\nexport const ComboboxField = ({\n label,\n labelProps,\n helperText,\n errorText,\n warningText,\n configField,\n ...props\n}: ComboboxSingleSelectFieldProps \| ComboboxMultiSelectFieldProps) => {\n return (\n <FormField\n label={label}\n labelProps={labelProps}\n helperText={helperText}\n warningText={warningText}\n errorText={errorText}\n configField={configField}\n >\n <Combobox {...props} />\n </FormField>\n );\n};\n","import {\n Children,\n cloneElement,\n type ComponentPropsWithRef,\n createContext,\n type ReactElement,\n type ReactNode,\n useContext,\n useRef,\n} from 'react';\nimport {\n type AriaCheckboxGroupProps,\n mergeProps,\n useCheckboxGroup,\n useCheckboxGroupItem,\n} from 'react-aria';\nimport innerText from 'react-innertext';\nimport { type CheckboxGroupState, useCheckboxGroupState } from 'react-stately';\n\nimport type { CheckboxProps } from 'design-system/components/Checkbox';\nimport type Checkbox from 'design-system/components/Checkbox';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst CheckboxGroupContext = createContext<CheckboxGroupState>(null);\n\n/* Preserves the parent FormControl context (disabled, hasError, etc.) but clears\n * inputId so each Checkbox inside the group generates its own unique id. /\nconst ClearGroupInputId = ({ children }: { children: ReactNode }) => {\n const parentContext = useContext(FormControlContext);\n return (\n <FormControlContext.Provider value={{ ...parentContext, inputId: undefined }}>\n {children}\n </FormControlContext.Provider>\n );\n};\n\ninterface CheckboxGroupItemProps {\n children: ReactElement<ComponentPropsWithRef<typeof Checkbox>>;\n}\n\nconst CheckboxGroupItem = (props: CheckboxGroupItemProps) => {\n const { children } = props;\n const checkboxProps = children.props;\n\n const state = useContext(CheckboxGroupContext);\n const ref = useRef();\n const { inputProps } = useCheckboxGroupItem(\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n {\n ...checkboxProps,\n onChange: undefined,\n isDisabled: checkboxProps.disabled,\n isReadOnly: checkboxProps.readOnly,\n isRequired: checkboxProps.required,\n isIndeterminate: checkboxProps.indeterminate,\n value: String(children.props.value),\n 'aria-label': innerText(checkboxProps.label),\n },\n state,\n ref,\n );\n\n return cloneElement(\n children,\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n mergeProps(inputProps, {\n onChange: checkboxProps.onChange,\n disabled: state.isDisabled \|\| checkboxProps.disabled,\n checked: state.isSelected(String(inputProps.value)),\n ref,\n } as ComponentPropsWithRef<typeof Checkbox>),\n );\n};\n\ninterface CheckboxGroupFieldProps\n extends\n Omit<ImplementsFormField, 'configField'>,\n Omit<\n AriaCheckboxGroupProps,\n 'description' \| 'disabled' \| 'isReadOnly' \| 'isRequired' \| 'errorMessage'\n > {\n children?: ReactElement<CheckboxProps>[];\n disabled?: boolean;\n readOnly?: boolean;\n required?: boolean;\n}\n\nconst CheckboxGroupField = ({\n children,\n name,\n onChange,\n disabled,\n readOnly,\n required,\n ...props\n}: CheckboxGroupFieldProps) => {\n const reactAriaProps = {\n ...props,\n description: props.helperText,\n errorMessage: props.errorText,\n onChange,\n name,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n };\n const state = useCheckboxGroupState(reactAriaProps);\n const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(\n reactAriaProps,\n state,\n );\n\n return (\n <FormField\n labelProps={labelProps}\n helperProps={descriptionProps}\n errorProps={errorMessageProps}\n disabled={disabled}\n {...groupProps}\n {...props}\n >\n <ClearGroupInputId>\n <CheckboxGroupContext.Provider value={state}>\n {Children.map(children, (checkbox) => (\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n <CheckboxGroupItem>{checkbox}</CheckboxGroupItem>\n ))}\n </CheckboxGroupContext.Provider>\n </ClearGroupInputId>\n </FormField>\n );\n};\n\nexport default CheckboxGroupField;\n","import { type ReactNode, useState } from 'react';\n\nimport { MoreIcon, PlusIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from 'design-system/components/ListBox';\nimport type { MenuItemProps } from 'design-system/components/Menu';\n\ninterface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n label: string;\n onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;\n}\n\ninterface AddDropdownConfig {\n options: ({ label: ReactNode; value: string } & Omit<MenuItemProps, 'children'>)[];\n onSelection: (value: string) => void;\n}\n\ninterface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {\n actions?: ListBoxFieldAction[];\n addDropdownConfig?: AddDropdownConfig;\n}\n\nconst ListBoxField = <T extends object>({\n label,\n helperText,\n errorText,\n warningText,\n labelProps,\n helperProps,\n errorProps,\n warningProps,\n inputId,\n onAdd,\n onDelete,\n deleteDisabled,\n configField: configFieldProp,\n size = 'md',\n actions = [],\n addDropdownConfig,\n selectedKeys: selectedKeysProp,\n onSelectionChange,\n defaultSelectedKeys,\n ...props\n}: ListBoxFieldProps<T>) => {\n const { configField } = useFormGroup({ configField: configFieldProp });\n const menuActions: ListBoxFieldAction[] = [...actions];\n const [selectedKeysState, setSelectedKeys] = useState(defaultSelectedKeys);\n const selectedKeys = selectedKeysProp ?? selectedKeysState;\n const effectiveSize = configField ? 'sm' : size;\n\n if (onDelete) {\n menuActions.unshift({\n label: 'Delete',\n onClick: () => onDelete(selectedKeys),\n disabled:\n deleteDisabled \|\|\n selectedKeys == null \|\|\n (typeof selectedKeys === 'object' && [...selectedKeys].length === 0),\n });\n }\n\n const addButton = (\n <IconButton size='sm' onClick={onAdd} aria-label='Add item to list'>\n <PlusIcon />\n </IconButton>\n );\n\n return (\n <FormField\n label={label}\n helperText={helperText}\n errorText={errorText}\n warningText={warningText}\n labelProps={labelProps}\n helperProps={helperProps}\n errorProps={errorProps}\n warningProps={warningProps}\n inputId={inputId}\n configField={configField}\n rightActions={\n configField && (\n <>\n {menuActions.length > 0 && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions' size='sm'>\n <MoreIcon />\n </IconButton>\n }\n portal\n >\n {menuActions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n onClick={() => action.onClick(selectedKeys)}\n size={effectiveSize}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n {onAdd && !addDropdownConfig && addButton}\n {addDropdownConfig && (\n <DropdownMenu trigger={addButton} align='start' portal>\n {addDropdownConfig.options.map((option) => (\n <DropdownMenu.Item\n key={option.value}\n {...option}\n onClick={() => addDropdownConfig.onSelection(option.value)}\n size={effectiveSize}\n >\n {option.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n </>\n )\n }\n >\n <ListBox\n id={inputId}\n fullWidth={configField}\n size={effectiveSize}\n deleteDisabled={deleteDisabled}\n // We have to control the keys so we can power the `rightActions`\n selectedKeys={selectedKeys}\n onSelectionChange={(keys) => {\n onSelectionChange?.(keys);\n setSelectedKeys(keys);\n }}\n {...props}\n />\n </FormField>\n );\n};\n\nexport default ListBoxField;\n","import { Fragment, type MouseEvent, type ReactNode, useState } from 'react';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport { useFormGroup } from '@persona/design-system/components/ConfigFormGroup';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport type { FormLabelProps } from '@persona/design-system/components/FormControl';\nimport type { MenuItemProps } from '@persona/design-system/components/Menu';\nimport TableBox, { type TableBoxProps } from '@persona/design-system/components/TableBox';\nimport { MoreIcon, PlusIcon } from '@persona/icons';\n\nimport FormField from './FormField';\nimport type { ImplementsFormField } from './inputFields';\n\nexport interface TableBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n label: string;\n onClick: (selectedKey: TableBoxProps['selectedKey']) => void;\n}\n\nexport interface TableBoxFieldActionGroup {\n type: 'group';\n heading: string;\n actions: TableBoxFieldAction[];\n}\n\nexport type TableBoxFieldActionEntry = TableBoxFieldAction \| TableBoxFieldActionGroup;\n\nconst isActionGroup = (action: TableBoxFieldActionEntry): action is TableBoxFieldActionGroup =>\n 'type' in action && action.type === 'group';\n\ninterface AddDropdownConfig {\n options: Array<{ label: string; value: string }>;\n onSelection: (value: string) => void;\n}\n\ninterface TableBoxFieldProps<T extends object = object>\n extends ImplementsFormField, Omit<TableBoxProps<T>, 'aria-label' \| 'onCreateNewRow'> {\n onAdd?: (e: MouseEvent<HTMLButtonElement>) => void;\n onDelete?: (selectedKey: string \| null) => void;\n deleteDisabled?: boolean;\n /* Actions and labeled action groups rendered in order. Empty groups are omitted. /\n actions?: TableBoxFieldActionEntry[];\n addDropdownConfig?: AddDropdownConfig;\n\n /\n Callback to create a new row and add it to the rows array\n * Should return the id of the newly created row\n */\n createNewRow?: () => string;\n children?: ReactNode;\n}\n\nconst TableBoxField = <T extends object = object>({\n label,\n helperText,\n errorText,\n warningText,\n labelProps: labelPropsProp,\n helperProps,\n errorProps,\n warningProps,\n inputId,\n onAdd,\n onDelete,\n deleteDisabled,\n configField: configFieldProp = true,\n actions = [],\n addDropdownConfig,\n selectedKey: selectedKeyProp,\n onSelectionChange,\n defaultSelectedKey,\n selectionMode,\n disabled,\n createNewRow,\n children,\n emptyText = 'No data',\n ...props\n}: TableBoxFieldProps<T>) => {\n const { configField } = useFormGroup({ configField: configFieldProp });\n const menuActions: TableBoxFieldActionEntry[] = [...actions];\n const [selectedKeyState, setSelectedKey] = useState(defaultSelectedKey);\n const selectedKey = selectedKeyProp ?? selectedKeyState;\n const [newRowId, setNewRowId] = useState<string \| null>(null);\n const labelProps: FormLabelProps = { size: 'sm', ...labelPropsProp };\n\n const handleCreateNewRow = () => {\n if (createNewRow) {\n setNewRowId(createNewRow());\n }\n };\n\n // Handle add button click\n const handleAddClick = (e: MouseEvent<HTMLButtonElement>) => {\n if (createNewRow) {\n handleCreateNewRow();\n } else if (onAdd) {\n onAdd(e);\n }\n };\n\n if (onDelete) {\n menuActions.unshift({\n label: 'Delete',\n onClick: () => selectedKey && onDelete(selectedKey),\n disabled: deleteDisabled \|\| selectedKey == null,\n });\n }\n const visibleMenuActions = menuActions.filter(\n (action) => !isActionGroup(action) \|\| action.actions.length > 0,\n );\n\n const addButton = (\n <IconButton\n size='sm'\n onClick={handleAddClick}\n aria-label='Add item to table'\n disabled={disabled}\n >\n <PlusIcon />\n </IconButton>\n );\n\n return (\n <FormField\n label={label}\n helperText={helperText}\n errorText={errorText}\n warningText={warningText}\n labelProps={labelProps}\n helperProps={helperProps}\n errorProps={errorProps}\n warningProps={warningProps}\n inputId={inputId}\n rightActions={\n configField && (\n <>\n {visibleMenuActions.length > 0 && (\n <DropdownMenu\n trigger={\n <IconButton aria-label='Actions' size='sm' disabled={disabled}>\n <MoreIcon />\n </IconButton>\n }\n portal\n >\n {visibleMenuActions.map((entry, entryIndex) => {\n const previousEntry = visibleMenuActions[entryIndex - 1];\n if (isActionGroup(entry)) {\n return (\n <Fragment key={`${entry.heading}-${entryIndex}`}>\n {entryIndex > 0 && <DropdownMenu.Divider />}\n <DropdownMenu.Heading size='sm'>{entry.heading}</DropdownMenu.Heading>\n {entry.actions.map((action) => (\n <DropdownMenu.Item\n key={action.label}\n {...action}\n disabled={disabled \|\| action.disabled}\n onClick={() => action.onClick(selectedKey)}\n size='sm'\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n </Fragment>\n );\n }\n\n return (\n <Fragment key={`${entry.label}-${entryIndex}`}>\n {previousEntry && isActionGroup(previousEntry) && <DropdownMenu.Divider />}\n <DropdownMenu.Item\n {...entry}\n disabled={disabled \|\| entry.disabled}\n onClick={() => entry.onClick(selectedKey)}\n size='sm'\n >\n {entry.label}\n </DropdownMenu.Item>\n </Fragment>\n );\n })}\n </DropdownMenu>\n )}\n {(onAdd \|\| createNewRow) && !addDropdownConfig && addButton}\n {addDropdownConfig && (\n <DropdownMenu trigger={addButton} portal>\n {addDropdownConfig.options.map((option) => (\n <DropdownMenu.Item\n key={option.value}\n {...option}\n onClick={() => addDropdownConfig.onSelection(option.value)}\n size='sm'\n >\n {option.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu>\n )}\n </>\n )\n }\n >\n <TableBox\n aria-label={`${label} table`}\n // We have to control the keys so we can power the `rightActions`\n selectedKey={selectedKey}\n onSelectionChange={(key) => {\n onSelectionChange?.(key);\n setSelectedKey(key);\n }}\n selectionMode={selectionMode}\n newRowId={newRowId}\n onCreateNewRow={createNewRow ? handleCreateNewRow : undefined}\n emptyText={emptyText}\n disabled={disabled}\n {...props}\n >\n {children}\n </TableBox>\n </FormField>\n );\n};\n\n// Attach subcomponents to TableBoxField\nTableBoxField.Row = TableBox.Row;\nTableBoxField.Cell = TableBox.Cell;\n\nexport default TableBoxField;\n"],"mappings":"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"}

package/dist/components/FormField/index.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-Cqwi_PyR.cjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-DoSXvnJ3.cjs";
 import { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps } from "../../inputFields.cjs";
 import CheckboxGroupField from "../../CheckboxGroupField.cjs";
 import ListBoxField from "../../ListBoxField.cjs";
-import TableBoxField from "../../TableBoxField.cjs";
-export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TableBoxField, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };
+import TableBoxField, { TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup } from "../../TableBoxField.cjs";
+export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TableBoxField, type TableBoxFieldAction, type TableBoxFieldActionEntry, type TableBoxFieldActionGroup, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };

package/dist/components/FormField/index.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-24UPuoL6.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-BddCs6P0.mjs";
 import { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps } from "../../inputFields.mjs";
 import CheckboxGroupField from "../../CheckboxGroupField.mjs";
 import ListBoxField from "../../ListBoxField.mjs";
-import TableBoxField from "../../TableBoxField.mjs";
-export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TableBoxField, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };
+import TableBoxField, { TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup } from "../../TableBoxField.mjs";
+export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TableBoxField, type TableBoxFieldAction, type TableBoxFieldActionEntry, type TableBoxFieldActionGroup, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };

package/dist/components/FormField/index.mjs CHANGED Viewed

@@ -1,26 +1,25 @@
 import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
 import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
-import { n as useFormGroup } from "../../useFormGroup-z0epBxXn.mjs";
-import { t as FormControlContext } from "../../useFormField-D0RTrPld.mjs";
-import { t as Checkbox } from "../../Checkbox-UWdk4pqb.mjs";
-import { s as MenuItem } from "../../Menu-BbSyWxFD.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-cN_AnKAT.mjs";
+import { n as useFormGroup } from "../../useFormGroup-BMukAMAd.mjs";
+import { t as FormControlContext } from "../../useFormField-eftOPiXj.mjs";
 import Input_default from "../Input/index.mjs";
-import { t as Combobox } from "../../Combobox-I44W5oX0.mjs";
-import { n as Select } from "../../Select-Fg2z5J-p.mjs";
-import { t as Toggle } from "../../Toggle-DOo0cLmI.mjs";
-import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText } from "../../FormControl-fK4HA_yF.mjs";
-import { t as RadioGroup } from "../../RadioGroup-BDHhFlmy.mjs";
-import { t as SegmentedControl } from "../../SegmentedControl-pRkMcMXe.mjs";
-import { t as TextAreaWithStyle } from "../../TextArea-CJJlw3rV.mjs";
-import { t as ListBox } from "../../ListBox-B7sbubm5.mjs";
-import { t as TableBox } from "../../TableBox-CPCWzwSl.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-cnkoGc7C.mjs";
+import { t as Checkbox } from "../../Checkbox-BghGF-iW.mjs";
+import { t as Combobox } from "../../Combobox-CeKMrlxy.mjs";
+import { n as Select } from "../../Select-ByTgXOlU.mjs";
+import { t as Toggle } from "../../Toggle-CfjUQlcK.mjs";
+import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText } from "../../FormControl-ArDcvmir.mjs";
+import { t as RadioGroup } from "../../RadioGroup-B3hRbIWF.mjs";
+import { t as SegmentedControl } from "../../SegmentedControl-B1ZLgu61.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-DIPeBLkr.mjs";
+import { t as ListBox } from "../../ListBox-CDNOJmvz.mjs";
+import { t as TableBox } from "../../TableBox-DIJffyts.mjs";
 import { Spacing } from "@persona/design-tokens";
-import { Children, cloneElement, createContext, forwardRef, useContext, useMemo, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, forwardRef, useContext, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { MoreIcon, PlusIcon } from "@persona/icons";
-import { mergeProps, useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
 import { uniqueId } from "lodash/fp.js";
+import { mergeProps, useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
 import { useCheckboxGroupState } from "react-stately";
 import innerText from "react-innertext";
 //#region components/FormField/FormField.tsx
@@ -324,7 +323,7 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 					children: /* @__PURE__ */ jsx(MoreIcon, {})
 				}),
 				portal: true,
-				children: menuActions.map((action) => /* @__PURE__ */ jsx(MenuItem, {
+				children: menuActions.map((action) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 					...action,
 					onClick: () => action.onClick(selectedKeys),
 					size: effectiveSize,
@@ -336,7 +335,7 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 				trigger: addButton,
 				align: "start",
 				portal: true,
-				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 					...option,
 					onClick: () => addDropdownConfig.onSelection(option.value),
 					size: effectiveSize,
@@ -360,6 +359,7 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 };
 //#endregion
 //#region components/FormField/TableBoxField.tsx
+const isActionGroup = (action) => "type" in action && action.type === "group";
 const TableBoxField = ({ label, helperText, errorText, warningText, labelProps: labelPropsProp, helperProps, errorProps, warningProps, inputId, onAdd, onDelete, deleteDisabled, configField: configFieldProp = true, actions = [], addDropdownConfig, selectedKey: selectedKeyProp, onSelectionChange, defaultSelectedKey, selectionMode, disabled, createNewRow, children, emptyText = "No data", ...props }) => {
 	const { configField } = useFormGroup({ configField: configFieldProp });
 	const menuActions = [...actions];
@@ -382,6 +382,7 @@ const TableBoxField = ({ label, helperText, errorText, warningText, labelProps:
 		onClick: () => selectedKey && onDelete(selectedKey),
 		disabled: deleteDisabled || selectedKey == null
 	});
+	const visibleMenuActions = menuActions.filter((action) => !isActionGroup(action) || action.actions.length > 0);
 	const addButton = /* @__PURE__ */ jsx(IconButton, {
 		size: "sm",
 		onClick: handleAddClick,
@@ -400,7 +401,7 @@ const TableBoxField = ({ label, helperText, errorText, warningText, labelProps:
 		warningProps,
 		inputId,
 		rightActions: configField && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			menuActions.length > 0 && /* @__PURE__ */ jsx(DropdownMenu_default, {
+			visibleMenuActions.length > 0 && /* @__PURE__ */ jsx(DropdownMenu_default, {
 				trigger: /* @__PURE__ */ jsx(IconButton, {
 					"aria-label": "Actions",
 					size: "sm",
@@ -408,19 +409,36 @@ const TableBoxField = ({ label, helperText, errorText, warningText, labelProps:
 					children: /* @__PURE__ */ jsx(MoreIcon, {})
 				}),
 				portal: true,
-				children: menuActions.map((action) => /* @__PURE__ */ jsx(MenuItem, {
-					...action,
-					disabled: disabled || action.disabled,
-					onClick: () => action.onClick(selectedKey),
-					size: "sm",
-					children: action.label
-				}, action.label))
+				children: visibleMenuActions.map((entry, entryIndex) => {
+					const previousEntry = visibleMenuActions[entryIndex - 1];
+					if (isActionGroup(entry)) return /* @__PURE__ */ jsxs(Fragment, { children: [
+						entryIndex > 0 && /* @__PURE__ */ jsx(DropdownMenu_default.Divider, {}),
+						/* @__PURE__ */ jsx(DropdownMenu_default.Heading, {
+							size: "sm",
+							children: entry.heading
+						}),
+						entry.actions.map((action) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+							...action,
+							disabled: disabled || action.disabled,
+							onClick: () => action.onClick(selectedKey),
+							size: "sm",
+							children: action.label
+						}, action.label))
+					] }, `${entry.heading}-${entryIndex}`);
+					return /* @__PURE__ */ jsxs(Fragment, { children: [previousEntry && isActionGroup(previousEntry) && /* @__PURE__ */ jsx(DropdownMenu_default.Divider, {}), /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+						...entry,
+						disabled: disabled || entry.disabled,
+						onClick: () => entry.onClick(selectedKey),
+						size: "sm",
+						children: entry.label
+					})] }, `${entry.label}-${entryIndex}`);
+				})
 			}),
 			(onAdd || createNewRow) && !addDropdownConfig && addButton,
 			addDropdownConfig && /* @__PURE__ */ jsx(DropdownMenu_default, {
 				trigger: addButton,
 				portal: true,
-				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 					...option,
 					onClick: () => addDropdownConfig.onSelection(option.value),
 					size: "sm",