scorer-ui-kit 3.0.7 → 3.0.8

package/dist/index.modern.js

@@ -3047,6 +3047,7 @@ var StyledButton$7 = styled.button`
 
   overflow: hidden;
   cursor: pointer;
+  user-select: none;
   outline: none;
   box-sizing: border-box;
 
@@ -3773,6 +3774,7 @@ var InputActionButton = styled.button.attrs({ type: "button" })`
   background: transparent;
   border: none;
   cursor: pointer;
+  user-select: none;
   outline: none;
 `;
 var FeedbackContainer$1 = styled.div`
@@ -11662,6 +11664,7 @@ var EditCell = ({ type = "text", placeholder = "", defaultValue, rowKey, alignme
 var CopyToClipboard = styled.button`
 
   cursor: pointer;
+  user-select: none;
   opacity: 0;
 
   position: absolute;
@@ -11831,7 +11834,9 @@ var TypeTableRow = ({ selectable = false, selectCallback, hasStatus, hasThumbnai
 				})
 			}) : null,
 			rowData.columns.map((cell, key) => {
-				const { cellStyle, alignment, showUnit, showStatus, hasCopyButton } = columnConfig[key];
+				const config = columnConfig[key];
+				if (config === void 0) return null;
+				const { cellStyle, alignment, showUnit, showStatus, hasCopyButton } = config;
 				const { unit, status, text, customComponent } = cell;
 				return /* @__PURE__ */ jsx(TypeTableCell, {
 					href: cell.href,
@@ -11935,6 +11940,7 @@ var MiddleLine = styled.div`
     margin-right: 15px;
   `};
 `;
+var columnKeyOf = (column, index) => column.columnId ?? `column_${index}`;
 var renderGroupHeader = (columnConfig, index) => {
 	if (index < 0) return null;
 	let isLastOfGroup = true;
@@ -11944,8 +11950,23 @@ var renderGroupHeader = (columnConfig, index) => {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Title$6, { children: columnConfig[index].groupTitle }), /* @__PURE__ */ jsx(MiddleLine, { $isLastOfGroup: isLastOfGroup })] });
 };
 var TypeTableHeader = ({ selectable, hasStatus, hasThumbnail, hasTypeIcon, allChecked, disableAllChecked, hasHeaderGroups, columnConfig, defaultAscending, toggleAllCallback = () => {}, sortCallback = () => {} }) => {
-	const [sortSpec, setSortSpec] = useState(columnConfig);
-	const [ascendingState, setAscendingState] = useState(defaultAscending);
+	const propActiveKey = useMemo(() => {
+		const index = columnConfig.findIndex(({ sortActive }) => sortActive);
+		return index === -1 ? null : columnKeyOf(columnConfig[index], index);
+	}, [columnConfig]);
+	const [activeKey, setActiveKey] = useState(propActiveKey);
+	const [ascending, setAscending] = useState(defaultAscending);
+	const [hasUserSorted, setHasUserSorted] = useState(false);
+	const [prevPropActiveKey, setPrevPropActiveKey] = useState(propActiveKey);
+	if (prevPropActiveKey !== propActiveKey) {
+		setPrevPropActiveKey(propActiveKey);
+		setActiveKey(propActiveKey);
+	}
+	const [prevDefaultAscending, setPrevDefaultAscending] = useState(defaultAscending);
+	if (prevDefaultAscending !== defaultAscending) {
+		setPrevDefaultAscending(defaultAscending);
+		if (!hasUserSorted) setAscending(defaultAscending);
+	}
 	const toggleAllCallbackWrapper = useCallback((checked) => {
 		toggleAllCallback(checked);
 	}, [toggleAllCallback]);
@@ -11956,23 +11977,19 @@ var TypeTableHeader = ({ selectable, hasStatus, hasThumbnail, hasTypeIcon, allCh
 	* - Clicked column was not active persist the last ascending option
 	*/
 	const toggleSort = useCallback((indexKey, columnId) => {
-		if (sortSpec[indexKey] === void 0) return;
-		if (!sortSpec[indexKey].sortable) return;
-		const updatedSort = [...sortSpec];
-		let lastActiveKey = null;
-		updatedSort.forEach((col, key) => {
-			if (col.sortActive) lastActiveKey = key;
-			if (key === indexKey) col.sortActive = true;
-			else col.sortActive = false;
-		});
-		const newAscending = lastActiveKey === indexKey ? !ascendingState : ascendingState;
-		sortCallback(newAscending, columnId === void 0 ? `column_${indexKey}` : columnId);
-		setSortSpec(updatedSort);
-		setAscendingState(newAscending);
+		const column = columnConfig[indexKey];
+		if (column === void 0 || !column.sortable) return;
+		const key = columnKeyOf(column, indexKey);
+		const newAscending = activeKey === key ? !ascending : ascending;
+		setHasUserSorted(true);
+		setActiveKey(key);
+		setAscending(newAscending);
+		sortCallback(newAscending, columnId ?? key);
 	}, [
-		ascendingState,
-		sortCallback,
-		sortSpec
+		activeKey,
+		ascending,
+		columnConfig,
+		sortCallback
 	]);
 	return /* @__PURE__ */ jsxs(HeaderRow, { children: [
 		selectable ? /* @__PURE__ */ jsx(HeaderItem, {
@@ -11997,13 +12014,14 @@ var TypeTableHeader = ({ selectable, hasStatus, hasThumbnail, hasTypeIcon, allCh
 			$fixedWidth: 35
 		}) : null,
 		columnConfig.map((column, key, allColls) => {
-			const { header, alignment, hasCopyButton, sortActive, columnId, sortable, minWidth } = column;
+			const { header, alignment, hasCopyButton, columnId, sortable, minWidth } = column;
+			const isSortActive = activeKey === columnKeyOf(column, key);
 			return /* @__PURE__ */ jsx(HeaderItem, {
 				$alignment: alignment,
 				$hasCopyButton: hasCopyButton,
 				$minWidth: minWidth,
 				$headerStyle: hasHeaderGroups ? "subHeader" : "header",
-				$isSortActive: sortActive,
+				$isSortActive: isSortActive,
 				children: /* @__PURE__ */ jsxs(TitleItems, {
 					$alignment: alignment,
 					children: [hasHeaderGroups && /* @__PURE__ */ jsx(GroupTitle, { children: hasHeaderGroups && renderGroupHeader(allColls, key) }), /* @__PURE__ */ jsx(TableHeaderTitle, {
@@ -12011,8 +12029,8 @@ var TypeTableHeader = ({ selectable, hasStatus, hasThumbnail, hasTypeIcon, allCh
 						sortable,
 						indexKey: key,
 						columnId,
-						isSortActive: sortActive,
-						ascending: ascendingState,
+						isSortActive,
+						ascending,
 						toggleSort
 					})]
 				})
@@ -12035,7 +12053,7 @@ var LoadingBox = styled.div`
   position: absolute;
   left: 0;
   z-index: 99;
-  background-color: var(--white-1);
+  background-color: var(--grey-2);
   height: calc(100% - 50px);
   opacity: 85%;
   width: 100%;
@@ -12070,10 +12088,12 @@ var isChecked = ({ _checked = false }) => {
 var isCheckBoxDisabled = ({ checkboxDisabled = false }) => {
 	return checkboxDisabled === true;
 };
-var TypeTable = ({ columnConfig, selectable, rows = [], closeText, hasStatus = false, hasThumbnail = false, hasTypeIcon = false, defaultAscending = false, isLoading = false, loadingText = "Loading Data...", emptyTableTitle = "", emptyTableText = "", hasHeaderGroups = false, sortCallback = () => {}, selectCallback = () => {}, toggleAllCallback = () => {} }) => {
+var TypeTable = ({ columnConfig, selectable, rows: rowsProp = [], closeText, hasStatus = false, hasThumbnail = false, hasTypeIcon = false, defaultAscending = false, isLoading = false, loadingText = "Loading Data...", emptyTableTitle = "", emptyTableText = "", hasHeaderGroups = false, sortCallback = () => {}, selectCallback = () => {}, toggleAllCallback = () => {} }) => {
+	const rows = rowsProp ?? [];
 	const [allChecked, setAllChecked] = useState(false);
 	const [disableAllChecked, setDisableAllChecked] = useState(false);
-	const isEmptyTable = rows.length === 1 && rows[0].columns.length === 0 && !isLoading;
+	const isEmptyTable = !isLoading && (rows.length === 0 || rows.length === 1 && rows[0].columns.length === 0);
+	const hasEmptyStateCopy = emptyTableTitle !== "" || emptyTableText !== "";
 	useEffect(() => {
 		let areAllChecked = false;
 		let disableCheckAll = false;
@@ -12086,6 +12106,10 @@ var TypeTable = ({ columnConfig, selectable, rows = [], closeText, hasStatus = f
 		isLoading,
 		rows
 	]);
+	useEffect(() => {
+		const rowKey = rows.findIndex((row) => row.columns.length > columnConfig.length);
+		if (rowKey !== -1) console.warn(`TypeTable: row ${rowKey} has ${rows[rowKey].columns.length} cells but columnConfig has ${columnConfig.length} entries. The extra cells are not rendered.`);
+	}, [rows, columnConfig]);
 	return /* @__PURE__ */ jsx(Container$24, { children: /* @__PURE__ */ jsxs(TableContainer, { children: [
 		/* @__PURE__ */ jsx(TypeTableHeader, {
 			selectable,
@@ -12104,7 +12128,7 @@ var TypeTable = ({ columnConfig, selectable, rows = [], closeText, hasStatus = f
 			size: "large",
 			styling: "primary"
 		}), /* @__PURE__ */ jsx(LoadingText, { children: loadingText })] }) : null,
-		isEmptyTable ? /* @__PURE__ */ jsxs(EmptyTableBox, { children: [/* @__PURE__ */ jsx("h3", { children: emptyTableTitle }), /* @__PURE__ */ jsx("p", { children: emptyTableText })] }) : null,
+		isEmptyTable && hasEmptyStateCopy ? /* @__PURE__ */ jsxs(EmptyTableBox, { children: [/* @__PURE__ */ jsx("h3", { children: emptyTableTitle }), /* @__PURE__ */ jsx("p", { children: emptyTableText })] }) : null,
 		rows.map((rowData, key) => {
 			const isLastRow = rows.length - 1 === key;
 			return /* @__PURE__ */ jsx(TypeTableRow, {
@@ -12323,6 +12347,7 @@ var CameraPanelWrapper = styled.div`
 
   ${({ $hasOnClick }) => $hasOnClick && `
     cursor: pointer;
+    user-select: none;
   `};
 `;
 var NewComponent = ({ streamProps, panelMetaData, customBottom, panelOnClick, ...props }) => {
@@ -12360,9 +12385,15 @@ var ButtonsWrapper = styled.div`
   justify-content: space-between;
 `;
 var LeftButtons = styled.div`
-  button {
-    margin: 0 10px 10px 0;
-  }
+  display: flex;
+  gap: 10px;
+
+  ${({ $actionsLayout }) => $actionsLayout === "stack" ? css`
+    flex-direction: column;
+    align-items: flex-start;
+  ` : css`
+    flex-wrap: wrap;
+  `}
 `;
 var RightButtons = styled.div`
   flex-shrink: 0;
@@ -12377,19 +12408,21 @@ var SelectedResults = styled.div`
 var renderSelected = (template, selected, total) => {
 	return template.replace("[SELECTED]", `${selected}`).replace("[TOTAL]", `${total}`);
 };
-var ActionsBar = ({ title = "Actions:", finishTextButton = "Finish", actionButtons = [], selectedTemplate = "Selected [SELECTED] of [TOTAL] Results", totalSelected = 0, totalAvailable = 0, finishCallback = () => {} }) => {
+var ActionsBar = ({ title = "Actions:", finishTextButton = "Finish", actionButtons = [], actionsLayout = "inline", selectedTemplate = "Selected [SELECTED] of [TOTAL] Results", totalSelected = 0, totalAvailable = 0, finishCallback = () => {} }) => {
 	return /* @__PURE__ */ jsxs(Container$21, { children: [
 		/* @__PURE__ */ jsx(Title$4, { children: title }),
-		/* @__PURE__ */ jsxs(ButtonsWrapper, { children: [/* @__PURE__ */ jsx(LeftButtons, { children: actionButtons.map(({ design, size, position, text, ...props }) => {
-			return /* @__PURE__ */ jsx(ButtonWithIcon, {
-				design: design || "secondary",
-				size: size || "small",
-				position: position || "left",
-				...props,
-				children: text
-			}, text);
-		}) }), /* @__PURE__ */ jsx(RightButtons, { children: /* @__PURE__ */ jsx(Button, {
-			size: "small",
+		/* @__PURE__ */ jsxs(ButtonsWrapper, { children: [/* @__PURE__ */ jsx(LeftButtons, {
+			$actionsLayout: actionsLayout,
+			children: actionButtons.map(({ design, size, position, text, ...props }) => {
+				return /* @__PURE__ */ jsx(ButtonWithIcon, {
+					design: design || "secondary",
+					size: size || "normal",
+					position: position || "left",
+					...props,
+					children: text
+				}, text);
+			})
+		}), /* @__PURE__ */ jsx(RightButtons, { children: /* @__PURE__ */ jsx(Button, {
 			onClick: finishCallback,
 			children: finishTextButton
 		}) })] }),
@@ -12698,6 +12731,7 @@ var StyledChip = styled.button`
   border: none;
   background: transparent;
   cursor: pointer;
+  user-select: none;
   outline: none;
   box-sizing: border-box;
   font-family: var(--font-ui);
@@ -12876,6 +12910,7 @@ var MenuItem = styled.button`
   border-bottom: 1px solid var(--grey-7);
   background: transparent;
   cursor: pointer;
+  user-select: none;
   font-family: var(--font-ui);
   font-size: 14px;
   font-weight: 500;
@@ -13842,6 +13877,7 @@ var ExtraAction = styled.button`
   text-decoration: none;
   transition: color 0.25s ease;
   cursor: pointer;
+  user-select: none;
 
   ${ExtraActionIcon}{
     svg * {
@@ -14308,6 +14344,7 @@ var Container$14 = styled.div`
   border-top: 1px solid var(--dividing-line);
   align-items: center;
   cursor: pointer;
+  user-select: none;
   svg {
     margin-top: 7px;
   }
@@ -14407,6 +14444,7 @@ var TitleContainer = styled.div`
   align-items: center;
   margin-left: 10px;
   margin: 3px 0 5px 10px;
+  user-select: none;
 `;
 var Container$13 = styled.div`
   cursor: pointer;
@@ -15859,6 +15897,7 @@ var Container$7 = styled.div`
   padding-bottom: 7px;
   height: 60px;
   cursor: pointer;
+  user-select: none;
 
   ${({ $active }) => $active ? css`
     border-bottom: 3px solid var(--primary-11);
@@ -16393,6 +16432,6 @@ var Sidebar = ({ children, ...props }) => {
 	});
 };
 //#endregion
-export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink, BaseStyles, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, ButtonsStack, CameraPanelWrapper, CameraPanels, Checkbox, ChipBar, ChipButton, ChipDropdown, ChipZoneBreak, ConfirmationModal, Content, ContentLayout, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, EditableText, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, FlexContentPlaceholder, Form, FullWidthContentBlock, GlobalUI, Icon, IconButton, IconSVGs, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer_default as LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PageHeader, PageTitle, Pagination, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, SplitButton, SplitLayout, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper, TextArea, TextAreaField, TextField, ThemeVariables, ToggleButton, Tooltip, TopBar, TypeTable, UtilityHeader, WebRTCPlayer as WebRTCClient, theme_default as defaultTheme, isDateInterval, isFilterItem, resetButtonStyles, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useModal, useNotification, usePoll, useThemeToggle, useTitle, useTo };
+export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink, BaseStyles, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, ButtonsStack, CameraPanelWrapper, CameraPanels, Checkbox, ChipBar, ChipButton, ChipDropdown, ChipZoneBreak, ConfirmationModal, Content, ContentLayout, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, EditableText, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, FlexContentPlaceholder, Form, FullWidthContentBlock, GlobalUI, Icon, IconButton, IconSVGs, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer_default as LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PageHeader, PageTitle, Pagination, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, SplitButton, SplitLayout, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper, TextArea, TextAreaField, TextField, ThemeVariables, ToggleButton, Tooltip, TopBar, TypeTable, UtilityHeader, WebRTCPlayer as WebRTCClient, theme_default as defaultTheme, isDateInterval, isFilterItem, resetButtonStyles, useBreakpoints, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useMediaQuery, useModal, useNotification, usePoll, useThemeToggle, useTitle, useTo };
 
 //# sourceMappingURL=index.modern.js.map