@zeniai/web-components 4.2.40 → 4.2.41

package/dist/components/taskManagement/TaskDetailPage.styled.d.ts

@@ -0,0 +1,329 @@
+import { WindowSize } from '../../context/windowSizeProvider';
+export declare const CommentAreaForNewTask: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Message: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const FormSection: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    windowSize: WindowSize;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TaskDetailSection: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CommentArea: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TabSwitcherWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PageContent: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    windowSize: WindowSize;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const VisibilityRadioGroup: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PageContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    windowSize: WindowSize;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ElementsContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NavBarContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    windowSize: WindowSize;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconsWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    windowSize: WindowSize;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledBackArrow: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const HeaderLeftSection: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderNameWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledPriority: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFlag: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    color: string;
+}, {}, {}>;
+export declare const StyledPriorityLabel: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const StyledHyperlinkIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const StyledArchiveIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const StyledDeleteIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const SnoozeIconWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSnoozeIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    $isSnoozed: boolean;
+}, {}, {}>;
+export declare const SnoozedBanner: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SnoozedClockIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const SnoozedText: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const SourceTaskHyperlinkIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const TooltipIconContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCopiedIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const CopiedText: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TooltipText: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const ReloadPage: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReloadIconContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledReloadIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const ReloadLabel: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+} & import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement>, {}, {}>;
+export declare const StyledRecurringIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+/** View Details toggle */
+export declare const ViewDetailsToggle: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ViewDetailsText: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const ViewDetailsChevron: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    $isExpanded: boolean;
+}, {}, {}>;
+/** CSS grid cells */
+export declare const GridCell: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const GridCellFullWidth: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const TagGridCell: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const RecurringGridCell: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const DescriptionSpacer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** Assignee field container */
+export declare const AssigneeContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    windowSize: WindowSize;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AssigneeFieldWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** Visibility field container */
+export declare const VisibilityContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    windowSize: WindowSize;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RightPanelContent: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ActivityTabContent: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SubtasksSectionContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PrivateToggle: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToggleTrack: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    $on: boolean;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToggleThumb: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    $on: boolean;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PrivateTagPill: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+} & import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement>, {}, {}>;
+export declare const SubtasksTable: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SubtasksSectionTitle: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const SubtasksCompletionCount: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const ParentBreadcrumb: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const ParentBreadcrumbArrow: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const HeaderNameDisplay: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+} & import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement>, {}, {}>;
+export declare const TaskTitleBar: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+/**
+ * TextField variant for the task title row. Uses the standard
+ * semi-bold typography from the design system (Manrope/14px) instead
+ * of an inline `style={{ fontFamily, fontSize, lineHeight }}` literal,
+ * and sizes via Space tokens.
+ */
+export declare const TaskTitleTextField: import('@emotion/styled').StyledComponent<Readonly<import('../formElements/textField/TextField').TextFieldProps> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const SubtasksHeaderRow: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/taskManagement/TaskDetailSubtaskForm.d.ts

@@ -0,0 +1,14 @@
+import { CreateSubTaskPayload, ID, SnackbarMessageConfig, Tag, User, UserGroup } from '@zeniai/client-epic-state';
+export interface TaskDetailSubtaskFormProps {
+    parentTaskId: ID;
+    tagList: Tag[];
+    userGroupList: UserGroup[];
+    userList: User[];
+    isCreating?: boolean;
+    onCancel: () => void;
+    onSubmit: (data: CreateSubTaskPayload) => void;
+    onCreateTagClick?: (tagName: string) => void;
+    onShowToast?: (messageInfo: SnackbarMessageConfig) => void;
+}
+declare const TaskDetailSubtaskForm: ({ tagList, userGroupList, userList, parentTaskId, isCreating, onCancel, onCreateTagClick, onShowToast, onSubmit, }: TaskDetailSubtaskFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TaskDetailSubtaskForm;

package/dist/components/taskManagement/TaskListRow.d.ts

@@ -1,4 +1,4 @@
-import { ID, SnackbarMessageConfig, SortOrder, Tag, Task, TaskGroupWithTasksList, TaskListUIState, TaskListViewSortKey, UserGroup, UserListSelectorView } from '@zeniai/client-epic-state';
+import { CreateSubTaskPayload, FetchState, ID, SnackbarMessageConfig, SortOrder, Tag, Task, TaskGroupWithTasksList, TaskListUIState, TaskListViewSortKey, TaskWithUserDetails, User, UserGroup, UserListSelectorView } from '@zeniai/client-epic-state';
 import { FormSectionProps } from '../formElements/common/formSection';
 export declare const getTaskFieldName: (sectionId: string, taskId: string, fieldKey: string) => string;
 export declare const isDuplicateGroupName: (newName: string, groupId: ID, existingTaskGroupNamesByGroupId: Record<ID, string>) => boolean;
@@ -10,6 +10,7 @@ export interface TaskListRowProps extends FormSectionProps {
     selectedRowIds: ID[];
     showGroupName: boolean;
     showRenameTextField: boolean;
+    subtasksByParentId: Map<ID, TaskWithUserDetails[]>;
     tagList: Tag[];
     taskGroup: TaskGroupWithTasksList;
     uiState: TaskListUIState;
@@ -17,21 +18,75 @@ export interface TaskListRowProps extends FormSectionProps {
     userList: UserListSelectorView;
     isTaskRecurringParentEnabled?: boolean;
     isZeniUser?: boolean;
+    subTaskCreateStatus?: FetchState;
     onAddNewTaskToTaskGroup: (taskGroupId: ID) => void;
     onCollapseAll: () => void;
     onCollapseToggle: (taskGroupId: ID) => void;
     onColumnSortConfigChanged: (sortKey: TaskListViewSortKey, sortOrder: SortOrder) => void;
+    onCreateSubtask: (parentTaskId: ID, data: CreateSubTaskPayload) => void;
     onCreateTagClick: (tagName: string, taskId: string) => void;
     onDeleteTaskGroup: (taskGroupId: ID) => void;
     onDragStart: (e: React.DragEvent, value: string) => void;
     onExpandAll: () => void;
     onParentTaskClick: (id: ID) => void;
     onRenameClick: () => void;
+    onRowHeightChange: () => void;
     onShowToast: (messageInfo: SnackbarMessageConfig) => void;
+    onSubtaskFormToggle: () => void;
     onTaskGroupNameClick: (id: ID) => void;
     onTaskManagementRowClick: (id: ID) => void;
     onTimeSpentUpdate: (task: Task, updates: Partial<Task>) => void;
+    resetSubtaskFormCreationStatus?: () => void;
 }
 export declare const getTagLabel: (tagIds: ID[], tagList: Tag[]) => JSX.Element;
-declare const TaskListRow: ({ taskGroup, userGroupList, tagList, sectionId, uiState, userList, showGroupName, showRenameTextField, isCollapsed, isSelectionAllowed, selectedRowIds, existingTaskGroupNamesByGroupId, onRenameClick, onDeleteTaskGroup, onExpandAll, onCollapseAll, onAddNewTaskToTaskGroup, onCollapseToggle, onTaskManagementRowClick, onColumnSortConfigChanged, onDragStart, onTimeSpentUpdate, onShowToast, onCreateTagClick, onTaskGroupNameClick, onParentTaskClick, isTaskRecurringParentEnabled, isZeniUser, }: TaskListRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RowContent: ({ taskDetail, userGroupList, tagList, isSelected, isLastRow, sectionId, userList, onRowClick, onTimeSpentUpdate, onShowToast, onCreateTagClick, onParentTaskClick, onAddSubtaskClick, isTaskRecurringParentEnabled, isZeniUser, isSubtask, hasSubtasks, hasExpandedContent, isSubtasksExpanded, onToggleSubtasks, }: {
+    isSelected: boolean;
+    sectionId: string;
+    tagList: Tag[];
+    taskDetail: TaskWithUserDetails;
+    userGroupList: UserGroup[];
+    userList: User[];
+    hasExpandedContent?: boolean;
+    hasSubtasks?: boolean;
+    isLastRow?: boolean;
+    isSubtask?: boolean;
+    isSubtasksExpanded?: boolean;
+    isTaskRecurringParentEnabled?: boolean;
+    isZeniUser?: boolean;
+    onAddSubtaskClick: () => void;
+    onCreateTagClick: (tagName: string, taskId: string) => void;
+    onParentTaskClick: (id: ID) => void;
+    onRowClick: () => void;
+    onShowToast: (messageInfo: SnackbarMessageConfig) => void;
+    onTimeSpentUpdate: (task: Task, updates: Partial<Task>) => void;
+    onToggleSubtasks?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TaskListRow: ({ taskGroup, userGroupList, tagList, sectionId, uiState, userList, showGroupName, showRenameTextField, isCollapsed, isSelectionAllowed, selectedRowIds, existingTaskGroupNamesByGroupId, subtasksByParentId, onRenameClick, onDeleteTaskGroup, onExpandAll, onCollapseAll, onAddNewTaskToTaskGroup, onCollapseToggle, onTaskManagementRowClick, onColumnSortConfigChanged, onDragStart, onTimeSpentUpdate, onShowToast, onCreateTagClick, onTaskGroupNameClick, onParentTaskClick, onCreateSubtask, onSubtaskFormToggle, onRowHeightChange, isTaskRecurringParentEnabled, isZeniUser, resetSubtaskFormCreationStatus, subTaskCreateStatus, }: TaskListRowProps) => import("react/jsx-runtime").JSX.Element;
 export default TaskListRow;
+export declare const RowWithSubtaskFormWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CreateSubtaskRow: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CreateSubtaskLeftGutter: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CreateSubtaskContent: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCreateSubtaskAddIcon: import('@emotion/styled').StyledComponent<import('react').SVGProps<SVGSVGElement> & {
+    title?: string;
+} & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const CreateSubtaskText: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;

package/dist/components/taskManagement/TaskListRowSmall.d.ts

@@ -1,4 +1,4 @@
-import { ID, SnackbarMessageConfig, Tag, Task, TaskGroupWithTasksList } from '@zeniai/client-epic-state';
+import { ID, SnackbarMessageConfig, Tag, Task, TaskGroupWithTasksList, TaskWithUserDetails } from '@zeniai/client-epic-state';
 import { FormSectionProps } from '../formElements/common/formSection';
 export interface TaskListRowSmallProps extends FormSectionProps {
     existingTaskGroupNamesByGroupId: Record<ID, string>;
@@ -10,6 +10,7 @@ export interface TaskListRowSmallProps extends FormSectionProps {
     tagList: Tag[];
     taskGroup: TaskGroupWithTasksList;
     isZeniUser?: boolean;
+    subtasksByParentId?: Map<ID, TaskWithUserDetails[]>;
     onAddNewTaskToTaskGroup: (taskGroupId: ID) => void;
     onCollapseAll: () => void;
     onCollapseToggle: (taskGroupId: ID) => void;
@@ -19,5 +20,6 @@ export interface TaskListRowSmallProps extends FormSectionProps {
     onShowToast: (messageInfo: SnackbarMessageConfig) => void;
     onTaskManagementRowClick: (id: ID) => void;
     onTimeSpentUpdate: (task: Task, updates: Partial<Task>) => void;
+    onRowHeightChange?: () => void;
 }
 export declare const TaskListRowSmall: ({ taskGroup, tagList, sectionId, showGroupName, showRenameTextField, isSelectionAllowed, isCollapsed, existingTaskGroupNamesByGroupId, onDeleteTaskGroup, onExpandAll, onCollapseAll, onAddNewTaskToTaskGroup, onCollapseToggle, onTaskManagementRowClick, onDragStart, onTimeSpentUpdate, onShowToast, isZeniUser, }: TaskListRowSmallProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/taskManagement/TaskManagementPage.d.ts

@@ -1,31 +1,5 @@
 import { ClientAnalytics } from '@zeniai/client-analytics';
-import { FetchState, ID, SnackbarMessageConfig, SortOrder, SpendManagementFiltersType, TagViewSelectorView, Task, TaskGroupKey, TaskListLocalData, TaskListSelectorView, TaskListTab, TaskListViewSortKey } from '@zeniai/client-epic-state';
-import { UserMultiSelectFieldValue } from '../cockpit/common/userMultiSelect/UserMultiSelectField';
-import { ZeniDatePickerValue } from '../common/zeniDatePicker/ZeniDatePickerField';
-import { MultiSelectFieldValue } from '../formElements/creatableMultiSelectField/CreatableMultiSelectField';
-import { SingleSelectPickerFieldValue } from '../formElements/singleSelectPickerField/SingleSelectPickerField';
-import { assigneeKey, dueDateKey, groupDataKey, groupNameKey, priorityKey, selectedIdsKey, statusKey, tagKey, taskDataKey, taskManagementTableSectionId, timeSpentKey } from './taskManagementFormConstants';
-interface GroupData {
-    [groupNameKey]: string;
-    [selectedIdsKey]: ID[];
-}
-interface TaskData {
-    [assigneeKey]: UserMultiSelectFieldValue;
-    [dueDateKey]: ZeniDatePickerValue;
-    [priorityKey]: SingleSelectPickerFieldValue;
-    [statusKey]: SingleSelectPickerFieldValue;
-    [tagKey]: MultiSelectFieldValue;
-    [timeSpentKey]: string;
-}
-type TasksFormData = Record<ID, TaskData>;
-type GroupFormData = Record<ID, GroupData>;
-interface TaskManagementTableSectionFormData {
-    [groupDataKey]: GroupFormData;
-    [taskDataKey]: TasksFormData;
-}
-export interface FormData {
-    [taskManagementTableSectionId]: TaskManagementTableSectionFormData;
-}
+import { CreateSubTaskPayload, FetchState, ID, SnackbarMessageConfig, SortOrder, SpendManagementFiltersType, TagViewSelectorView, Task, TaskGroupKey, TaskListLocalData, TaskListSelectorView, TaskListTab, TaskListViewSortKey } from '@zeniai/client-epic-state';
 export declare const uniqueFormName: (sectionId: ID) => `${string}_form`;
 export interface TaskManagementPageProps {
     isTaskTemplatesEnabled: boolean;
@@ -39,6 +13,7 @@ export interface TaskManagementPageProps {
     isTaskGroupAssigneesEnabled?: boolean;
     isTaskRecurringParentEnabled?: boolean;
     isZeniUser?: boolean;
+    subTaskCreateStatus?: FetchState;
     taskListFetchState?: FetchState;
     assignGroupToTasks: (taskGroupId: ID) => void;
     bulkUpdateTasks: (taskIds: ID[], updates: Partial<Task>) => void;
@@ -69,6 +44,8 @@ export interface TaskManagementPageProps {
     updateTask: (task: Task, updates: Partial<Task>) => void;
     onAskAiCfoClick?: () => void;
     onQuickResponsesClick?: () => void;
+    onSubtaskCreation?: (parentTaskId: ID, data: CreateSubTaskPayload) => void;
+    resetSubtaskFormCreationStatus?: () => void;
 }
-declare const TaskManagementPage: ({ taskListView, tagListView, isTaskTemplatesEnabled, taskListFetchState, onCreateTagClick, updateTask, onDragNDrop, onDeleteTaskGroup, updateLocalData, onTaskManagementRowClick, onParentTaskClick, onReloadTasks, onColumnSortConfigChanged, onSearchTextChanged, onTabChange, onBackClick, bulkUpdateTasks, onNewTaskClick, onFiltersChange, resetLocalData, handleCreateGroup, assignGroupToTasks, onAddNewTaskToTaskGroup, onGroupByFilterChange, onTaskGroupRename, analytics, onTimeSpentUpdate, onShowToast, handleGroupTemplateClick, handleGroupTemplateTaskClick, handleNewTaskInitialization, onTaskGroupNameClick, isAiCfoAccessEnabled, isZeniUser, isTaskBulkResolutionEnabled, isTaskCannedResponsesEnabled, isTaskCategorizationEnabled, isTaskGroupAssigneesEnabled, isTaskRecurringParentEnabled, onAskAiCfoClick, onQuickResponsesClick, }: TaskManagementPageProps) => import("react/jsx-runtime").JSX.Element;
+declare const TaskManagementPage: ({ taskListView, tagListView, isTaskTemplatesEnabled, taskListFetchState, onCreateTagClick, updateTask, onDragNDrop, onDeleteTaskGroup, updateLocalData, onTaskManagementRowClick, onParentTaskClick, onReloadTasks, onColumnSortConfigChanged, onSearchTextChanged, onTabChange, onBackClick, bulkUpdateTasks, onNewTaskClick, onFiltersChange, resetLocalData, handleCreateGroup, assignGroupToTasks, onAddNewTaskToTaskGroup, onGroupByFilterChange, onTaskGroupRename, analytics, onTimeSpentUpdate, onShowToast, handleGroupTemplateClick, handleGroupTemplateTaskClick, handleNewTaskInitialization, onTaskGroupNameClick, isAiCfoAccessEnabled, isZeniUser, isTaskBulkResolutionEnabled, isTaskCannedResponsesEnabled, isTaskCategorizationEnabled, isTaskGroupAssigneesEnabled, isTaskRecurringParentEnabled, onAskAiCfoClick, onQuickResponsesClick, resetSubtaskFormCreationStatus, onSubtaskCreation, subTaskCreateStatus, }: TaskManagementPageProps) => import("react/jsx-runtime").JSX.Element;
 export default TaskManagementPage;

package/dist/components/taskManagement/stories/subtaskMocks.d.ts

@@ -0,0 +1,30 @@
+import { Tag, Task, User, UserGroup } from '@zeniai/client-epic-state';
+export declare const subtaskUsersMock: User[];
+export declare const subtaskUserGroupsMock: UserGroup[];
+export declare const subtaskTagsMock: Tag[];
+export declare const sampleSubtasksMock: Task[];
+export declare const parentTaskIdMock = "task_4517209d-0209-4440-ae17-fe44f1480dd6";
+export declare const newSubtaskSectionDefaults: {
+    newSubtaskSection: {
+        name: string;
+        description: string;
+        status: {
+            selectedOption: string;
+        };
+        priority: {
+            selectedOption: string;
+        };
+        assignees: {
+            selectedUsers: never[];
+            selectedUserGroups: never[];
+            allUsers: User[];
+            allUserGroups: UserGroup[];
+        };
+        tags: {
+            selectedOptions: never[];
+            allOptions: never[];
+        };
+        dueDate: undefined;
+        timeSpent: string;
+    };
+};

package/dist/components/taskManagement/taskManagementFormConstants.d.ts

@@ -1,5 +1,6 @@
 export declare const taskManagementPage = "taskManagementPage";
 export declare const taskManagementTableSectionId = "taskManagementTable";
+export declare const newSubtaskSectionId = "newSubtaskSection";
 export declare const newGroupField = "newGroup";
 export declare const groupDataKey = "groupData";
 export declare const taskDataKey = "taskData";

package/dist/components/taskManagement/taskManagementHeaderItemsData.d.ts

@@ -2,6 +2,7 @@ import { SortOrder, TaskListViewSortKey } from '@zeniai/client-epic-state';
 import { ResponsiveSized } from '../../context/windowSizeProvider';
 export interface TaskListHeaderItemData {
     key: TaskListViewSortKey;
+    minWidth: string;
     sortOrder: SortOrder;
     value: string;
     width: ResponsiveSized;

package/dist/components/taskManagement/taskManagementTypes.d.ts

@@ -0,0 +1,33 @@
+import { ID } from '@zeniai/client-epic-state';
+import { UserMultiSelectFieldValue } from '../cockpit/common/userMultiSelect/UserMultiSelectField';
+import { ZeniDatePickerValue } from '../common/zeniDatePicker/ZeniDatePickerField';
+import { MultiSelectFieldValue } from '../formElements/creatableMultiSelectField/CreatableMultiSelectField';
+import { SingleSelectPickerFieldValue } from '../formElements/singleSelectPickerField/SingleSelectPickerField';
+import { assigneeKey, dueDateKey, groupDataKey, groupNameKey, newSubtaskSectionId, priorityKey, selectedIdsKey, statusKey, tagKey, taskDataKey, taskManagementTableSectionId, timeSpentKey } from './taskManagementFormConstants';
+interface GroupData {
+    [groupNameKey]: string;
+    [selectedIdsKey]: ID[];
+}
+interface TaskData {
+    [assigneeKey]: UserMultiSelectFieldValue;
+    [dueDateKey]: ZeniDatePickerValue;
+    [priorityKey]: SingleSelectPickerFieldValue;
+    [statusKey]: SingleSelectPickerFieldValue;
+    [tagKey]: MultiSelectFieldValue;
+    [timeSpentKey]: string;
+}
+export type TasksFormData = Record<ID, TaskData>;
+export type GroupFormData = Record<ID, GroupData>;
+export interface TaskManagementTableSectionFormData {
+    [groupDataKey]: GroupFormData;
+    [taskDataKey]: TasksFormData;
+}
+export interface SubtasksFormData extends TaskData {
+    description: string;
+    name: string;
+}
+export interface TaskManagementFormData {
+    [newSubtaskSectionId]: SubtasksFormData;
+    [taskManagementTableSectionId]: TaskManagementTableSectionFormData;
+}
+export {};

package/dist/components/taskManagement/useSubtaskFormVisibility.d.ts

@@ -0,0 +1,20 @@
+import { FetchState } from '@zeniai/client-epic-state';
+/**
+ * Edge-triggered visibility controller for the TaskDetailPage subtask
+ * creation form.
+ *
+ * The form should auto-close only on the In-Progress -> Completed
+ * transition of `subTaskCreateStatus` (i.e. when a fresh create
+ * succeeds). A level-trigger (`status === "Completed"`) is buggy: if
+ * the user creates a subtask, then re-opens the form, the status is
+ * still "Completed" from the previous create and the form would close
+ * immediately. Mirrors the edge-trigger pattern in TaskListRow.tsx.
+ *
+ * Extracted to its own module so the race-condition unit test can
+ * exercise the exact code path that ships in TaskDetailPage, instead
+ * of a re-declared copy.
+ */
+export declare const useSubtaskFormVisibility: (subTaskCreateStatus: FetchState | undefined) => {
+    isSubtaskFormVisible: boolean;
+    setIsSubtaskFormVisible: (visible: boolean) => void;
+};

package/dist/designSystem/zeniConstants.d.ts

@@ -15,6 +15,14 @@ export declare enum Space {
     sp11 = "80px",
     sp12 = "100px"
 }
+/**
+ * BorderStroke widths for borders / outlines. Wrapped in an enum so call
+ * sites don't sprinkle bare px literals throughout styled-components.
+ */
+export declare enum BorderStroke {
+    hairline = "1px",
+    regular = "2px"
+}
 export declare const OriginalFont: "Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif";
 export declare const fonts: {
     readonly Original: "Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif";