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.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["Input","TextArea","DropdownMenu","DropdownMenu"],"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.mjs","names":["Input","TextArea","DropdownMenu","DropdownMenu"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,OACA,UACA,YACA,aACA,WACA,YACA,aACA,cACA,YACA,aAAa,iBACb,uBACA,cACA,GAAG,SAEL,KACA;CACA,MAAM,EAAE,aAAa,yBAAyB,cAAc;CAC5D,MAAM,cAAc,mBAAmB;CAEvC,MAAM,eAAe,QACnB,oBAAC,WAAD;EAAW,SAAS,eAAe,aAAa,aAAa,KAAA;EAAW,GAAI;YACzE;EACS,CAAA,GACV;AAEJ,QACE,qBAAC,aAAD;EACE,UAAU,CAAC,CAAC;EACZ,YAAY,CAAC,CAAC;EACT;EACQ;EACb,iBAAiB,CAAC,CAAC;EACI;EACvB,GAAI;YAPN;GASG,eACC,qBAAC,QAAD;IAAQ,SAAQ;IAAgB,OAAM;cAAtC,CACG,cACD,oBAAC,QAAD;KAAQ,SAAS,QAAQ;eAAK;KAAsB,CAAA,CAC7C;QAET;GAEF,oBAAC,oBAAD,EAAqB,UAA8B,CAAA;GAClD,CAAC,eAAe,cAAc,oBAAC,YAAD;IAAY,GAAI;cAAc;IAAwB,CAAA;GACpF,CAAC,eAAe,eAAe,oBAAC,aAAD;IAAa,GAAI;cAAe;IAA0B,CAAA;GACzF,CAAC,eAAe,aAAa,oBAAC,WAAD;IAAW,GAAI;cAAa;IAAsB,CAAA;GACpE;;EAEhB;;;;;;;AChGF,MAAa,0BACX,UAIG;CACH,MAAM,EACJ,OACA,SACA,YACA,WACA,aACA,YACA,aACA,cACA,YACA,aACA,uBACA,cACA,GAAG,eACD;AAEJ,QAAO;EACL,gBAAgB;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD;EACD;;AAKH,MAAa,YAAY,WACvB,SAAS,UAAU,OAAO,KAAK;CAC7B,MAAM,EAAE,gBAAgB,eAAe,uBAAuB,MAAM;CACpE,MAAM,EAAE,IAAI,GAAG,SAAS;AAExB,QACE,oBAAC,WAAD;EACE,GAAI;EACJ,YAAY;GAAE,MAAM,MAAM;GAAM,GAAG,eAAe;GAAY;EAC9D,SAAS,eAAe,WAAW;YAEnC,oBAACA,eAAD;GAAO,GAAI;GAAW;GAAO,CAAA;EACnB,CAAA;EAGjB;AAID,MAAa,gBAAgB,WAC3B,SAAS,cACP,EAAE,OAAO,YAAY,WAAW,aAAa,SAAS,IAAI,aAAa,GAAG,SAC1E,KACA;AACA,QACE,oBAAC,WAAD;EACE,SAAS,WAAW;EACb;EACP,YAAY,EAAE,MAAM,MAAM,MAAM;EACpB;EACC;EACF;EACE;YAEb,oBAACC,mBAAD;GAAU,GAAI;GAAY;GAAO,CAAA;EACvB,CAAA;EAGjB;AAID,MAAa,eAAe,EAC1B,IACA,OACA,YACA,WACA,aACA,UACA,aACA,YACA,GAAG,YACmB;CACtB,MAAM,WAAW,cAAc,MAAM,SAAS,uCAAuC,EAAE,CAAC,GAAG,CAAC;AAE5F,QACE,oBAAC,WAAD;EACS;EACP,YAAY;GAAE,SAAS;GAAU,MAAM,MAAM;GAAM,GAAG;GAAY;EACtD;EACC;EACF;EACE;YAEb,oBAAC,QAAD;GAAQ,GAAI;GAAO,IAAI;GACpB;GACM,CAAA;EACC,CAAA;;AAOhB,MAAa,mBAAmB,EAC9B,OACA,YACA,WACA,aACA,UACA,GAAG,YACuB;AAC1B,QACE,oBAAC,WAAD;EACS;EACK;EACC;EACF;YAEX,oBAAC,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpC,CAAA;;AAQhB,MAAa,iBAAiB,EAC5B,OACA,YACA,WACA,aACA,eACA,aACA,YACA,GAAG,YACqB;AACxB,QACE,oBAAC,WAAD;EACS;EACK;EACC;EACF;EACE;EACD;YAEZ,oBAAC,UAAD;GAAU,OAAO;GAAe,GAAI;GAAS,CAAA;EACnC,CAAA;;AAMhB,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,OAAO,YAAY,WAAW,aAAa,aAAa,GAAG,SAC7D,KACA;AACA,QACE,oBAAC,WAAD;EACS;EACP,YAAY,EAAE,MAAM,MAAM,MAAM;EACpB;EACC;EACF;EACE;YAEb,oBAAC,QAAD;GAAQ,GAAI;GAAY;GAAO,CAAA;EACrB,CAAA;EAEd;AAOF,MAAa,wBAAwB,WACnC,SAAS,sBACP,EAAE,OAAO,YAAY,WAAW,aAAa,aAAa,UAAU,YAAY,GAAG,SACnF,KACA;AACA,QACE,oBAAC,WAAD;EACS;EACK;EACC;EACF;EACE;EACD;YAEZ,oBAAC,kBAAD;GAAkB,WAAA;GAAU,GAAI;GAAY;GACzC;GACgB,CAAA;EACT,CAAA;EAGjB;AAOD,MAAa,iBAAiB,EAC5B,OACA,YACA,YACA,WACA,aACA,aACA,GAAG,YACiE;AACpE,QACE,oBAAC,WAAD;EACS;EACK;EACA;EACC;EACF;EACE;YAEb,oBAAC,UAAD,EAAU,GAAI,OAAS,CAAA;EACb,CAAA;;;;AC1PhB,MAAM,uBAAuB,cAAkC,KAAK;;;AAIpE,MAAM,qBAAqB,EAAE,eAAwC;CACnE,MAAM,gBAAgB,WAAW,mBAAmB;AACpD,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;GAAE,GAAG;GAAe,SAAS,KAAA;GAAW;EACzE;EAC2B,CAAA;;AAQlC,MAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,aAAa;CACrB,MAAM,gBAAgB,SAAS;CAE/B,MAAM,QAAQ,WAAW,qBAAqB;CAC9C,MAAM,MAAM,QAAQ;CACpB,MAAM,EAAE,eAAe,qBAErB;EACE,GAAG;EACH,UAAU,KAAA;EACV,YAAY,cAAc;EAC1B,YAAY,cAAc;EAC1B,YAAY,cAAc;EAC1B,iBAAiB,cAAc;EAC/B,OAAO,OAAO,SAAS,MAAM,MAAM;EACnC,cAAc,UAAU,cAAc,MAAM;EAC7C,EACD,OACA,IACD;AAED,QAAO,aACL,UAEA,WAAW,YAAY;EACrB,UAAU,cAAc;EACxB,UAAU,MAAM,cAAc,cAAc;EAC5C,SAAS,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;EACnD;EACD,CAA2C,CAC7C;;AAgBH,MAAM,sBAAsB,EAC1B,UACA,MACA,UACA,UACA,UACA,UACA,GAAG,YAC0B;CAC7B,MAAM,iBAAiB;EACrB,GAAG;EACH,aAAa,MAAM;EACnB,cAAc,MAAM;EACpB;EACA;EACA,YAAY;EACZ,YAAY;EACZ,YAAY;EACb;CACD,MAAM,QAAQ,sBAAsB,eAAe;CACnD,MAAM,EAAE,YAAY,YAAY,kBAAkB,sBAAsB,iBACtE,gBACA,MACD;AAED,QACE,oBAAC,WAAD;EACc;EACZ,aAAa;EACb,YAAY;EACF;EACV,GAAI;EACJ,GAAI;YAEJ,oBAAC,mBAAD,EAAA,UACE,oBAAC,qBAAqB,UAAtB;GAA+B,OAAO;aACnC,SAAS,IAAI,WAAW,aAEvB,oBAAC,mBAAD,EAAA,UAAoB,UAA6B,CAAA,CACjD;GAC4B,CAAA,EACd,CAAA;EACV,CAAA;;;;AC1GhB,MAAM,gBAAkC,EACtC,OACA,YACA,WACA,aACA,YACA,aACA,YACA,cACA,SACA,OACA,UACA,gBACA,aAAa,iBACb,OAAO,MACP,UAAU,EAAE,EACZ,mBACA,cAAc,kBACd,mBACA,qBACA,GAAG,YACuB;CAC1B,MAAM,EAAE,gBAAgB,aAAa,EAAE,aAAa,iBAAiB,CAAC;CACtE,MAAM,cAAoC,CAAC,GAAG,QAAQ;CACtD,MAAM,CAAC,mBAAmB,mBAAmB,SAAS,oBAAoB;CAC1E,MAAM,eAAe,oBAAoB;CACzC,MAAM,gBAAgB,cAAc,OAAO;AAE3C,KAAI,SACF,aAAY,QAAQ;EAClB,OAAO;EACP,eAAe,SAAS,aAAa;EACrC,UACE,kBACA,gBAAgB,QACf,OAAO,iBAAiB,YAAY,CAAC,GAAG,aAAa,CAAC,WAAW;EACrE,CAAC;CAGJ,MAAM,YACJ,oBAAC,YAAD;EAAY,MAAK;EAAK,SAAS;EAAO,cAAW;YAC/C,oBAAC,UAAD,EAAY,CAAA;EACD,CAAA;AAGf,QACE,oBAAC,WAAD;EACS;EACK;EACD;EACE;EACD;EACC;EACD;EACE;EACL;EACI;EACb,cACE,eACE,qBAAA,YAAA,EAAA,UAAA;GACG,YAAY,SAAS,KACpB,oBAACC,sBAAD;IACE,SACE,oBAAC,YAAD;KAAY,cAAW;KAAU,MAAK;eACpC,oBAAC,UAAD,EAAY,CAAA;KACD,CAAA;IAEf,QAAA;cAEC,YAAY,KAAK,WAChB,oBAACA,qBAAa,MAAd;KAEE,GAAI;KACJ,eAAe,OAAO,QAAQ,aAAa;KAC3C,MAAM;eAEL,OAAO;KACU,EANb,OAAO,MAMM,CACpB;IACW,CAAA;GAEhB,SAAS,CAAC,qBAAqB;GAC/B,qBACC,oBAACA,sBAAD;IAAc,SAAS;IAAW,OAAM;IAAQ,QAAA;cAC7C,kBAAkB,QAAQ,KAAK,WAC9B,oBAACA,qBAAa,MAAd;KAEE,GAAI;KACJ,eAAe,kBAAkB,YAAY,OAAO,MAAM;KAC1D,MAAM;eAEL,OAAO;KACU,EANb,OAAO,MAMM,CACpB;IACW,CAAA;GAEhB,EAAA,CAAA;YAIP,oBAAC,SAAD;GACE,IAAI;GACJ,WAAW;GACX,MAAM;GACU;GAEF;GACd,oBAAoB,SAAS;AAC3B,wBAAoB,KAAK;AACzB,oBAAgB,KAAK;;GAEvB,GAAI;GACJ,CAAA;EACQ,CAAA;;;;ACjHhB,MAAM,iBAAiB,WACrB,UAAU,UAAU,OAAO,SAAS;AAwBtC,MAAM,iBAA4C,EAChD,OACA,YACA,WACA,aACA,YAAY,gBACZ,aACA,YACA,cACA,SACA,OACA,UACA,gBACA,aAAa,kBAAkB,MAC/B,UAAU,EAAE,EACZ,mBACA,aAAa,iBACb,mBACA,oBACA,eACA,UACA,cACA,UACA,YAAY,WACZ,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,aAAa,EAAE,aAAa,iBAAiB,CAAC;CACtE,MAAM,cAA0C,CAAC,GAAG,QAAQ;CAC5D,MAAM,CAAC,kBAAkB,kBAAkB,SAAS,mBAAmB;CACvE,MAAM,cAAc,mBAAmB;CACvC,MAAM,CAAC,UAAU,eAAe,SAAwB,KAAK;CAC7D,MAAM,aAA6B;EAAE,MAAM;EAAM,GAAG;EAAgB;CAEpE,MAAM,2BAA2B;AAC/B,MAAI,aACF,aAAY,cAAc,CAAC;;CAK/B,MAAM,kBAAkB,MAAqC;AAC3D,MAAI,aACF,qBAAoB;WACX,MACT,OAAM,EAAE;;AAIZ,KAAI,SACF,aAAY,QAAQ;EAClB,OAAO;EACP,eAAe,eAAe,SAAS,YAAY;EACnD,UAAU,kBAAkB,eAAe;EAC5C,CAAC;CAEJ,MAAM,qBAAqB,YAAY,QACpC,WAAW,CAAC,cAAc,OAAO,IAAI,OAAO,QAAQ,SAAS,EAC/D;CAED,MAAM,YACJ,oBAAC,YAAD;EACE,MAAK;EACL,SAAS;EACT,cAAW;EACD;YAEV,oBAAC,UAAD,EAAY,CAAA;EACD,CAAA;AAGf,QACE,oBAAC,WAAD;EACS;EACK;EACD;EACE;EACD;EACC;EACD;EACE;EACL;EACT,cACE,eACE,qBAAA,YAAA,EAAA,UAAA;GACG,mBAAmB,SAAS,KAC3B,oBAACC,sBAAD;IACE,SACE,oBAAC,YAAD;KAAY,cAAW;KAAU,MAAK;KAAe;eACnD,oBAAC,UAAD,EAAY,CAAA;KACD,CAAA;IAEf,QAAA;cAEC,mBAAmB,KAAK,OAAO,eAAe;KAC7C,MAAM,gBAAgB,mBAAmB,aAAa;AACtD,SAAI,cAAc,MAAM,CACtB,QACE,qBAAC,UAAD,EAAA,UAAA;MACG,aAAa,KAAK,oBAACA,qBAAa,SAAd,EAAwB,CAAA;MAC3C,oBAACA,qBAAa,SAAd;OAAsB,MAAK;iBAAM,MAAM;OAA+B,CAAA;MACrE,MAAM,QAAQ,KAAK,WAClB,oBAACA,qBAAa,MAAd;OAEE,GAAI;OACJ,UAAU,YAAY,OAAO;OAC7B,eAAe,OAAO,QAAQ,YAAY;OAC1C,MAAK;iBAEJ,OAAO;OACU,EAPb,OAAO,MAOM,CACpB;MACO,EAAA,EAdI,GAAG,MAAM,QAAQ,GAAG,aAcxB;AAIf,YACE,qBAAC,UAAD,EAAA,UAAA,CACG,iBAAiB,cAAc,cAAc,IAAI,oBAACA,qBAAa,SAAd,EAAwB,CAAA,EAC1E,oBAACA,qBAAa,MAAd;MACE,GAAI;MACJ,UAAU,YAAY,MAAM;MAC5B,eAAe,MAAM,QAAQ,YAAY;MACzC,MAAK;gBAEJ,MAAM;MACW,CAAA,CACX,EAAA,EAVI,GAAG,MAAM,MAAM,GAAG,aAUtB;MAEb;IACW,CAAA;IAEf,SAAS,iBAAiB,CAAC,qBAAqB;GACjD,qBACC,oBAACA,sBAAD;IAAc,SAAS;IAAW,QAAA;cAC/B,kBAAkB,QAAQ,KAAK,WAC9B,oBAACA,qBAAa,MAAd;KAEE,GAAI;KACJ,eAAe,kBAAkB,YAAY,OAAO,MAAM;KAC1D,MAAK;eAEJ,OAAO;KACU,EANb,OAAO,MAMM,CACpB;IACW,CAAA;GAEhB,EAAA,CAAA;YAIP,oBAAC,UAAD;GACE,cAAY,GAAG,MAAM;GAER;GACb,oBAAoB,QAAQ;AAC1B,wBAAoB,IAAI;AACxB,mBAAe,IAAI;;GAEN;GACL;GACV,gBAAgB,eAAe,qBAAqB,KAAA;GACzC;GACD;GACV,GAAI;GAEH;GACQ,CAAA;EACD,CAAA;;AAKhB,cAAc,MAAM,SAAS;AAC7B,cAAc,OAAO,SAAS"}

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

@@ -1,2 +1,2 @@
-const require_HoverCopyableField = require("../../HoverCopyableField-DyW2iZuo.cjs");
+const require_HoverCopyableField = require("../../HoverCopyableField-B_WNB7Qp.cjs");
 module.exports = require_HoverCopyableField.HoverCopyableField_default;

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

@@ -1,2 +1,2 @@
-import { t as HoverCopyableField_default } from "../../HoverCopyableField-DBkYvwii.mjs";
+import { t as HoverCopyableField_default } from "../../HoverCopyableField-DR575ayC.mjs";
 export { HoverCopyableField_default as default };

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

@@ -9,9 +9,9 @@ const require_Text = require("../../Text-CzN0DOXV.cjs");
 const require_Tooltip = require("../../Tooltip-vylydKVv.cjs");
 const require_Stack = require("../../Stack-BF-9YjA1.cjs");
 const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
-const require_Checkbox = require("../../Checkbox-B83WfsOZ.cjs");
-const require_DropdownMenu = require("../../DropdownMenu-CeqZAxjs.cjs");
-const require_LoadingShimmer = require("../../LoadingShimmer-uG2UzYQd.cjs");
+const require_DropdownMenu = require("../../DropdownMenu-CfJxgWN5.cjs");
+const require_LoadingShimmer = require("../../LoadingShimmer-CUjbAqGd.cjs");
+const require_Checkbox = require("../../Checkbox-DhxpxzGp.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);

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

@@ -4,9 +4,9 @@ import { i as Paragraph } from "../../Text-hEoPeOc9.mjs";
 import { a as Tooltip } from "../../Tooltip-CDvOu1UN.mjs";
 import { n as Stack } from "../../Stack-ckRN7LrP.mjs";
 import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
-import { t as Checkbox } from "../../Checkbox-UWdk4pqb.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-cN_AnKAT.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-b430vgof.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-cnkoGc7C.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-Bu6KtQ06.mjs";
+import { t as Checkbox } from "../../Checkbox-BghGF-iW.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { useEffect, useState } from "react";

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

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Input = require("../../Input-DQS-BEym.cjs");
+const require_Input = require("../../Input-BDLUq-pK.cjs");
 //#region components/Input/index.ts
 var Input_default = require_Input.Input;
 //#endregion

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

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-XppkvfUf.cjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-CEcTvtX2.cjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

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

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-DW7oacjc.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-4KeYlOWM.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

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

@@ -1,4 +1,4 @@
-import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-Bl7633Ux.mjs";
+import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-PWfwMSJ7.mjs";
 //#region components/Input/index.ts
 var Input_default = Input;
 //#endregion

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

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_ListBox = require("../../ListBox-B4uoo_PT.cjs");
+const require_ListBox = require("../../ListBox-BCscLcYL.cjs");
 exports.ListBox = require_ListBox.ListBox;
 exports.default = require_ListBox.ListBox;
 exports.useListBoxContext = require_ListBox.useListBoxContext;

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

@@ -1,2 +1,2 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "../../ListBox-DeVmbXeC.cjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "../../ListBox-WyZvseo5.cjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, useListBoxContext };

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

@@ -1,2 +1,2 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "../../ListBox-CVvKa5sc.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "../../ListBox-DZIAlPbc.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, useListBoxContext };

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

@@ -1,2 +1,2 @@
-import { n as useListBoxContext, t as ListBox } from "../../ListBox-B7sbubm5.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-CDNOJmvz.mjs";
 export { ListBox, ListBox as default, useListBoxContext };

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

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_LoadingShimmer = require("../../LoadingShimmer-uG2UzYQd.cjs");
+const require_LoadingShimmer = require("../../LoadingShimmer-CUjbAqGd.cjs");
 exports.LoadingShimmer = require_LoadingShimmer.LoadingShimmer;
 exports.LoadingShimmerHeading = require_LoadingShimmer.LoadingShimmerHeading;
 exports.LoadingShimmerParagraph = require_LoadingShimmer.LoadingShimmerParagraph;

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

@@ -1,2 +1,2 @@
-import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-b430vgof.mjs";
+import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-Bu6KtQ06.mjs";
 export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerParagraph, MaybeLoadingShimmer };

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

@@ -3,7 +3,7 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 require("../../chunk-CKQMccvm.cjs");
-const require_Input = require("../../Input-DQS-BEym.cjs");
+const require_Input = require("../../Input-BDLUq-pK.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region components/MaskedInput/MaskedInput.tsx

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

@@ -1,4 +1,4 @@
-import { n as Input } from "../../Input-Bl7633Ux.mjs";
+import { n as Input } from "../../Input-PWfwMSJ7.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { IMaskMixin } from "react-imask";

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

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Menu = require("../../Menu-BLbEcodU.cjs");
+const require_Menu = require("../../Menu-BXic-30n.cjs");
 exports.FloatingCard = require_Menu.FloatingCard;
 exports.IconContainer = require_Menu.IconContainer;
 exports.ListItem = require_Menu.ListItem;

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

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-C_NOsHAm.cjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-BKMxOXkj.cjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

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

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-CSgCXX0k.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-BJ5c7HGD.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

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

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-BbSyWxFD.mjs";
+import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-CVuFAxl2.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuItem, MenuList };

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

@@ -7,7 +7,7 @@ const require_Card = require("../../Card-CaOItkgL.cjs");
 const require_Text = require("../../Text-CzN0DOXV.cjs");
 const require_Stack = require("../../Stack-BF-9YjA1.cjs");
 const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
-const require_TabBar = require("../../TabBar-D8WCGYd5.cjs");
+const require_TabBar = require("../../TabBar-BpHMYvNb.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
@@ -203,8 +203,11 @@ const StyledModalCardBody = (0, styled_components.default)(require_Card.Card_def
 /**
 * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.
 */
-const ModalCard = (0, react.forwardRef)(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, ...props }, ref) {
+const ModalCard = (0, react.forwardRef)(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, portalContainer, ...props }, ref) {
 	const [selectedTabIdx, setSelectedTabIdx] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		setSelectedTabIdx(0);
+	}, [tabs?.length ?? 0]);
 	const titleAndClose = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalHeader, {
 		justify: "flex-start",
 		align: "center",
@@ -233,7 +236,7 @@ const ModalCard = (0, react.forwardRef)(function ModalCard({ title, children, sh
 					role: tabs ? "tabpanel" : void 0,
 					id: `pds-modal_tab-panel-${tab.name}`,
 					"aria-labelledby": `pds-modal_tab-${tab.name}`,
-					children: tab.contents
+					children: typeof tab.contents === "function" ? tab.contents({ portalContainer }) : tab.contents
 				}, tab.name)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledModalCardBody, {
 					$noPadding: noBodyPadding,
 					role: tabs ? "tabpanel" : void 0,
@@ -257,6 +260,7 @@ const Modal = ({ children, trigger, contentProps, noBodyPadding = false, size =
 		tabs,
 		noBodyPadding,
 		...contentProps,
+		portalContainer,
 		children: typeof children === "function" ? children({ portalContainer }) : children
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.DialogTrigger, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","names":["ModalOverlay","AriaModal","Button","Spacing","HStack","Color","DialogTrigger","AriaButton","XIcon","Heading","AriaHeading","TabBar","Dialog","Card","Stack","Tab","Pressable"],"sources":["../../../lib/useModalInsetRight.ts","../../../components/Modal/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() \|\| '0px';\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' \| 'opening' \| 'open' \| 'closing';\n\nexport interface ModalInsetRight {\n /** Animated inset value — starts at 0px on panel open so CSS transition fires /\n insetRight: string;\n panelState: PanelInsetState;\n}\n\n/\n Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n \n panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n /\nconst useModalInsetRight = (): ModalInsetRight => {\n const [insetRight, setInsetRight] = useState(getModalInsetRight);\n const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n getModalInsetRight() !== '0px' ? 'open' : 'closed',\n );\n const prevInsetRight = useRef(getModalInsetRight());\n const transitionTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const rafRef = useRef<number \| null>(null);\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const prev = prevInsetRight.current;\n const next = getModalInsetRight();\n prevInsetRight.current = next;\n\n if (prev === '0px' && next !== '0px') {\n if (prefersReducedMotion()) {\n setInsetRight(next);\n setPanelState('open');\n } else {\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n setInsetRight('0px');\n setPanelState('opening');\n rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n transitionTimerRef.current = setTimeout(\n () => setPanelState('open'),\n SIDEBAR_OPEN_TRANSITION_MS,\n );\n }\n } else if (prev !== '0px' && next === '0px') {\n if (prefersReducedMotion()) {\n setInsetRight('0px');\n setPanelState('closed');\n } else {\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n setInsetRight(prev);\n setPanelState('closing');\n rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n transitionTimerRef.current = setTimeout(\n () => setPanelState('closed'),\n SIDEBAR_CLOSE_TRANSITION_MS,\n );\n }\n } else {\n setInsetRight(next);\n }\n });\n\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['style'],\n });\n\n return () => {\n observer.disconnect();\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n };\n }, []);\n\n return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n","import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { forwardRef, type ReactNode, useState } from 'react';\nimport {\n Button as AriaButton,\n Dialog,\n DialogTrigger,\n Heading as AriaHeading,\n Modal as AriaModal,\n ModalOverlay,\n Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport useModalInsetRight, {\n SIDEBAR_CLOSE_TRANSITION_MS,\n SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{ $insetRight: string; $transitionMs: number }>`\n @keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: ${({ $insetRight }) => $insetRight};\n transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n z-index: 10001;\n outline: none;\n width: 100%;\n`;\n\nconst ModalCloseButton = styled(Button)`\n display: inline-flex;\n padding: ${Spacing[2]};\n border-radius: ${Spacing[1]};\n width: fit-content;\n min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n justify: 'flex-end',\n align: 'center',\n spacing: Spacing[2],\n})`\n padding: ${Spacing[3]} ${Spacing[4]};\n border-top: 1px solid ${Color.BorderDivider};\n`;\n\nconst ModalHeaderTitle = styled.div`\n flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n return (\n <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n <XIcon />\n </ModalCloseButton>\n </AriaButton>\n );\n};\n\nexport interface ModalTitleProps {\n children: ReactNode;\n className?: string;\n}\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n return (\n <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n {children}\n </Heading>\n );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n border-bottom: ${({ $hasTabs }) => ($hasTabs ? 'none' : `1px solid ${Color.BorderDivider}`)};\n padding: ${({ $hasTabs }) =>\n $hasTabs\n ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full' }>`\n position: relative;\n left: 50%;\n transform: translateX(-50%);\n width: ${({ $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100% - 160px)';\n default:\n return '90vw';\n }\n }};\n max-width: ${({ theme, $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100% - 160px)';\n default:\n return theme.modal.width[$size];\n }\n }};\n / TODO: Use breakpoints to make this responsive /\n max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n ${({ $size }) =>\n $size === 'full' &&\n `\n height: calc(100vh - 160px);\n `}\n margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n /\n Display X button to close popover\n /\n showCloseButton?: boolean;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer content\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n /\n tabs?: TabView[];\n\n /\n Title of the modal\n /\n title?: ReactNode;\n\n /\n Children content\n /\n children?: ReactNode;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n /\n noBodyPadding?: boolean;\n\n /\n Additional props for the Dialog element\n /\n className?: string;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n $noPadding?: boolean;\n $hidden?: boolean;\n}>`\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n ${({ $noPadding }) =>\n $noPadding\n ? 'padding: 0;'\n : `\n padding-left: ${Spacing[4]};\n padding-right: ${Spacing[4]};\n `}\n ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/\n Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n /\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardProps>(function ModalCard(\n { title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, ...props },\n ref,\n) {\n const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n\n const titleAndClose = (\n <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n {showCloseButton && <ModalClose aria-label='Close' />}\n </ModalHeader>\n );\n\n const modalHeader = tabs ? (\n <Stack>\n {titleAndClose}\n <ModalTabBar>\n {tabs.map((tab, idx) => (\n <Tab\n key={tab.name}\n selected={selectedTabIdx === idx}\n id={`pds-modal_tab-${idx}`}\n onClick={() => setSelectedTabIdx(idx)}\n aria-controls={`pds-modal_tab-panel-${idx}`}\n >\n {tab.name}\n </Tab>\n ))}\n </ModalTabBar>\n </Stack>\n ) : (\n titleAndClose\n );\n\n return (\n <StyledDialog {...props} ref={ref}>\n <StyledCard elevated $size={size}>\n {(showCloseButton \|\| title) && modalHeader}\n {tabs ? (\n tabs.map((tab, idx) => (\n <StyledModalCardBody\n key={tab.name}\n $noPadding={noBodyPadding}\n $hidden={selectedTabIdx !== idx}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${tab.name}`}\n aria-labelledby={`pds-modal_tab-${tab.name}`}\n >\n {tab.contents}\n </StyledModalCardBody>\n ))\n ) : (\n <StyledModalCardBody\n $noPadding={noBodyPadding}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${selectedTabIdx}`}\n aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n >\n {children}\n </StyledModalCardBody>\n )}\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </StyledCard>\n </StyledDialog>\n );\n});\n\ninterface TabView {\n name: string;\n contents: JSX.Element;\n badge?: React.ReactElement;\n disabled?: boolean;\n 'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n /\n Title of the Card\n /\n title?: string;\n\n /\n Component to use as trigger. React Aria trigger props will be merged with this element.\n /\n trigger?: ComponentProps<typeof Pressable>['children'];\n\n /\n Props to apply to Modal.Card within\n /\n contentProps?: ModalCardProps;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer section intended for actions.\n * You can pass in Buttons directly and they will render in a HStack.\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n /\n tabs?: TabView[];\n\n /\n Children content\n /\n children?: ReactNode \| ((props: { portalContainer: HTMLDivElement \| null }) => ReactNode);\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n * Can also be set via contentProps.noBodyPadding.\n /\n noBodyPadding?: boolean;\n\n /\n Controls whether the modal is open (controlled)\n /\n open?: boolean;\n\n /\n Default open state (uncontrolled)\n /\n defaultOpen?: boolean;\n\n /\n Handler called when open state changes\n /\n onOpenChange?: (isOpen: boolean) => void;\n\n /\n Whether the modal can be dismissed by clicking outside or pressing escape\n /\n isDismissable?: boolean;\n\n /\n Whether pressing the escape key closes the modal\n */\n isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n children,\n trigger,\n contentProps,\n noBodyPadding = false,\n size = 'md',\n title,\n footer,\n tabs,\n defaultOpen,\n onOpenChange,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n open,\n}: ModalProps) => {\n const [portalContainer, setPortalContainer] = useState<HTMLDivElement \| null>(null);\n const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n const transitionMs =\n panelState === 'opening'\n ? SIDEBAR_OPEN_TRANSITION_MS\n : panelState === 'closing'\n ? SIDEBAR_CLOSE_TRANSITION_MS\n : 0;\n\n const content = (\n <ModalCard\n size={size}\n title={title}\n footer={footer}\n tabs={tabs}\n noBodyPadding={noBodyPadding}\n {...contentProps}\n >\n {typeof children === 'function' ? children({ portalContainer }) : children}\n </ModalCard>\n );\n\n // Wrap trigger element to ensure it works with react-aria-components\n const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n return (\n <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n {wrappedTrigger}\n <StyledModalOverlay\n $insetRight={modalInsetRight}\n $transitionMs={transitionMs}\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n >\n <StyledModal ref={setPortalContainer}>{content}</StyledModal>\n </StyledModalOverlay>\n </DialogTrigger>\n );\n};\n\nexport default Object.assign(Modal, {\n Title: ModalTitle,\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","names":["ModalOverlay","AriaModal","Button","Spacing","HStack","Color","DialogTrigger","AriaButton","XIcon","Heading","AriaHeading","TabBar","Dialog","Card","Stack","Tab","Pressable"],"sources":["../../../lib/useModalInsetRight.ts","../../../components/Modal/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() \|\| '0px';\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' \| 'opening' \| 'open' \| 'closing';\n\nexport interface ModalInsetRight {\n /** Animated inset value — starts at 0px on panel open so CSS transition fires /\n insetRight: string;\n panelState: PanelInsetState;\n}\n\n/\n Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n \n panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n /\nconst useModalInsetRight = (): ModalInsetRight => {\n const [insetRight, setInsetRight] = useState(getModalInsetRight);\n const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n getModalInsetRight() !== '0px' ? 'open' : 'closed',\n );\n const prevInsetRight = useRef(getModalInsetRight());\n const transitionTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const rafRef = useRef<number \| null>(null);\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n const prev = prevInsetRight.current;\n const next = getModalInsetRight();\n prevInsetRight.current = next;\n\n if (prev === '0px' && next !== '0px') {\n if (prefersReducedMotion()) {\n setInsetRight(next);\n setPanelState('open');\n } else {\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n setInsetRight('0px');\n setPanelState('opening');\n rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n transitionTimerRef.current = setTimeout(\n () => setPanelState('open'),\n SIDEBAR_OPEN_TRANSITION_MS,\n );\n }\n } else if (prev !== '0px' && next === '0px') {\n if (prefersReducedMotion()) {\n setInsetRight('0px');\n setPanelState('closed');\n } else {\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n setInsetRight(prev);\n setPanelState('closing');\n rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n transitionTimerRef.current = setTimeout(\n () => setPanelState('closed'),\n SIDEBAR_CLOSE_TRANSITION_MS,\n );\n }\n } else {\n setInsetRight(next);\n }\n });\n\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['style'],\n });\n\n return () => {\n observer.disconnect();\n if (transitionTimerRef.current) {\n clearTimeout(transitionTimerRef.current);\n }\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n };\n }, []);\n\n return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n","import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { forwardRef, type ReactNode, useEffect, useState } from 'react';\nimport {\n Button as AriaButton,\n Dialog,\n DialogTrigger,\n Heading as AriaHeading,\n Modal as AriaModal,\n ModalOverlay,\n Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport useModalInsetRight, {\n SIDEBAR_CLOSE_TRANSITION_MS,\n SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{ $insetRight: string; $transitionMs: number }>`\n @keyframes overlayShow {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n background-color: rgba(0, 0, 0, 0.5);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: ${({ $insetRight }) => $insetRight};\n transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n z-index: 10001;\n outline: none;\n width: 100%;\n`;\n\nconst ModalCloseButton = styled(Button)`\n display: inline-flex;\n padding: ${Spacing[2]};\n border-radius: ${Spacing[1]};\n width: fit-content;\n min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n justify: 'flex-end',\n align: 'center',\n spacing: Spacing[2],\n})`\n padding: ${Spacing[3]} ${Spacing[4]};\n border-top: 1px solid ${Color.BorderDivider};\n`;\n\nconst ModalHeaderTitle = styled.div`\n flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n return (\n <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n <XIcon />\n </ModalCloseButton>\n </AriaButton>\n );\n};\n\nexport interface ModalTitleProps {\n children: ReactNode;\n className?: string;\n}\n\n/* Props passed to modal content render functions. /\nexport interface ModalRenderProps {\n /* Element that floating content should use as its portal container. /\n portalContainer: HTMLDivElement \| null;\n}\n\ntype ModalRenderable = ReactNode \| ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n return (\n <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n {children}\n </Heading>\n );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n border-bottom: ${({ $hasTabs }) => ($hasTabs ? 'none' : `1px solid ${Color.BorderDivider}`)};\n padding: ${({ $hasTabs }) =>\n $hasTabs\n ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full' }>`\n position: relative;\n left: 50%;\n transform: translateX(-50%);\n width: ${({ $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100% - 160px)';\n default:\n return '90vw';\n }\n }};\n max-width: ${({ theme, $size }) => {\n switch ($size) {\n case 'auto':\n return 'auto';\n case 'full':\n return 'calc(100% - 160px)';\n default:\n return theme.modal.width[$size];\n }\n }};\n / TODO: Use breakpoints to make this responsive /\n max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n display: flex;\n flex-direction: column;\n overflow: hidden;\n ${({ $size }) =>\n $size === 'full' &&\n `\n height: calc(100vh - 160px);\n `}\n margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n /\n Display X button to close popover\n /\n showCloseButton?: boolean;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer content\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n * Tab contents can be render functions that receive the modal portal container.\n /\n tabs?: TabView[];\n\n /\n Title of the modal\n /\n title?: ReactNode;\n\n /\n Children content\n /\n children?: ReactNode;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n /\n noBodyPadding?: boolean;\n\n /\n Additional props for the Dialog element\n /\n className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n portalContainer: HTMLDivElement \| null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n $noPadding?: boolean;\n $hidden?: boolean;\n}>`\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n ${({ $noPadding }) =>\n $noPadding\n ? 'padding: 0;'\n : `\n padding-left: ${Spacing[4]};\n padding-right: ${Spacing[4]};\n `}\n ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/\n Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n /\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n {\n title,\n children,\n showCloseButton = true,\n size,\n footer,\n tabs,\n noBodyPadding = false,\n portalContainer,\n ...props\n },\n ref,\n) {\n const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n const tabCount = tabs?.length ?? 0;\n\n useEffect(() => {\n setSelectedTabIdx(0);\n }, [tabCount]);\n\n const titleAndClose = (\n <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n {showCloseButton && <ModalClose aria-label='Close' />}\n </ModalHeader>\n );\n\n const modalHeader = tabs ? (\n <Stack>\n {titleAndClose}\n <ModalTabBar>\n {tabs.map((tab, idx) => (\n <Tab\n key={tab.name}\n selected={selectedTabIdx === idx}\n id={`pds-modal_tab-${idx}`}\n onClick={() => setSelectedTabIdx(idx)}\n aria-controls={`pds-modal_tab-panel-${idx}`}\n >\n {tab.name}\n </Tab>\n ))}\n </ModalTabBar>\n </Stack>\n ) : (\n titleAndClose\n );\n\n return (\n <StyledDialog {...props} ref={ref}>\n <StyledCard elevated $size={size}>\n {(showCloseButton \|\| title) && modalHeader}\n {tabs ? (\n tabs.map((tab, idx) => (\n <StyledModalCardBody\n key={tab.name}\n $noPadding={noBodyPadding}\n $hidden={selectedTabIdx !== idx}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${tab.name}`}\n aria-labelledby={`pds-modal_tab-${tab.name}`}\n >\n {typeof tab.contents === 'function'\n ? tab.contents({ portalContainer })\n : tab.contents}\n </StyledModalCardBody>\n ))\n ) : (\n <StyledModalCardBody\n $noPadding={noBodyPadding}\n role={tabs ? 'tabpanel' : undefined}\n id={`pds-modal_tab-panel-${selectedTabIdx}`}\n aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n >\n {children}\n </StyledModalCardBody>\n )}\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </StyledCard>\n </StyledDialog>\n );\n});\n\ninterface TabView {\n name: string;\n contents: ModalRenderable;\n badge?: React.ReactElement;\n disabled?: boolean;\n 'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n /\n Title of the Card\n /\n title?: string;\n\n /\n Component to use as trigger. React Aria trigger props will be merged with this element.\n /\n trigger?: ComponentProps<typeof Pressable>['children'];\n\n /\n Props to apply to Modal.Card within\n /\n contentProps?: ModalCardProps;\n\n /\n Max width of the modal\n /\n size?: 'auto' \| 'md' \| 'lg' \| 'xl' \| 'full';\n\n /\n Footer section intended for actions.\n * You can pass in Buttons directly and they will render in a HStack.\n /\n footer?: ReactNode;\n\n /\n Renders tabs within the modal.\n * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n * Overrides `children`.\n /\n tabs?: TabView[];\n\n /\n Children content\n /\n children?: ModalRenderable;\n\n /\n When true, removes horizontal and vertical padding from the body. Defaults to false.\n * Can also be set via contentProps.noBodyPadding.\n /\n noBodyPadding?: boolean;\n\n /\n Controls whether the modal is open (controlled)\n /\n open?: boolean;\n\n /\n Default open state (uncontrolled)\n /\n defaultOpen?: boolean;\n\n /\n Handler called when open state changes\n /\n onOpenChange?: (isOpen: boolean) => void;\n\n /\n Whether the modal can be dismissed by clicking outside or pressing escape\n /\n isDismissable?: boolean;\n\n /\n Whether pressing the escape key closes the modal\n */\n isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n children,\n trigger,\n contentProps,\n noBodyPadding = false,\n size = 'md',\n title,\n footer,\n tabs,\n defaultOpen,\n onOpenChange,\n isDismissable = false,\n isKeyboardDismissDisabled = false,\n open,\n}: ModalProps) => {\n const [portalContainer, setPortalContainer] = useState<HTMLDivElement \| null>(null);\n const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n const transitionMs =\n panelState === 'opening'\n ? SIDEBAR_OPEN_TRANSITION_MS\n : panelState === 'closing'\n ? SIDEBAR_CLOSE_TRANSITION_MS\n : 0;\n\n const content = (\n <ModalCard\n size={size}\n title={title}\n footer={footer}\n tabs={tabs}\n noBodyPadding={noBodyPadding}\n {...contentProps}\n portalContainer={portalContainer}\n >\n {typeof children === 'function' ? children({ portalContainer }) : children}\n </ModalCard>\n );\n\n // Wrap trigger element to ensure it works with react-aria-components\n const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n return (\n <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n {wrappedTrigger}\n <StyledModalOverlay\n $insetRight={modalInsetRight}\n $transitionMs={transitionMs}\n isDismissable={isDismissable}\n isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n >\n <StyledModal ref={setPortalContainer}>{content}</StyledModal>\n </StyledModalOverlay>\n </DialogTrigger>\n );\n};\n\nexport default Object.assign(Modal, {\n Title: ModalTitle,\n});\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import _default, { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger } from "../../Modal.cjs";
-export { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger, _default as default };
+import _default, { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger } from "../../Modal.cjs";
+export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

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

@@ -1,2 +1,2 @@
-import _default, { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger } from "../../Modal.mjs";
-export { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger, _default as default };
+import _default, { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger } from "../../Modal.mjs";
+export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

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

@@ -2,7 +2,7 @@ import { t as Card_default } from "../../Card-CLTkZLKr.mjs";
 import { n as Heading$1 } from "../../Text-hEoPeOc9.mjs";
 import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
 import { n as Button$1 } from "../../IconButton-DC4rh6ow.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-CAv10XAF.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-ByusqAXF.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
 import { forwardRef, useEffect, useRef, useState } from "react";
@@ -197,8 +197,11 @@ const StyledModalCardBody = styled(Card_default.Body)`
 /**
 * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.
 */
-const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, ...props }, ref) {
+const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, portalContainer, ...props }, ref) {
 	const [selectedTabIdx, setSelectedTabIdx] = useState(0);
+	useEffect(() => {
+		setSelectedTabIdx(0);
+	}, [tabs?.length ?? 0]);
 	const titleAndClose = /* @__PURE__ */ jsxs(ModalHeader, {
 		justify: "flex-start",
 		align: "center",
@@ -227,7 +230,7 @@ const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButt
 					role: tabs ? "tabpanel" : void 0,
 					id: `pds-modal_tab-panel-${tab.name}`,
 					"aria-labelledby": `pds-modal_tab-${tab.name}`,
-					children: tab.contents
+					children: typeof tab.contents === "function" ? tab.contents({ portalContainer }) : tab.contents
 				}, tab.name)) : /* @__PURE__ */ jsx(StyledModalCardBody, {
 					$noPadding: noBodyPadding,
 					role: tabs ? "tabpanel" : void 0,
@@ -251,6 +254,7 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 		tabs,
 		noBodyPadding,
 		...contentProps,
+		portalContainer,
 		children: typeof children === "function" ? children({ portalContainer }) : children
 	});
 	return /* @__PURE__ */ jsxs(DialogTrigger, {