@public-ui/sample-react 3.0.1-rc.0 → 3.0.2-1e1d8522b9f6826d286c64e7859e0ac6d14b13a9.0

package/src/components/popover-button/basic.tsx

@@ -1,8 +1,7 @@
 import type { FC } from 'react';
-import { useContext } from 'react';
-import React from 'react';
+import React, { useContext } from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolButton, KolPopoverButton, KolBadge } from '@public-ui/react';
+import { KolBadge, KolPopoverButton, KolToolbar, KolHeading } from '@public-ui/react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { HideMenusContext } from '../../shares/HideMenusContext';
 
@@ -14,6 +13,24 @@ export const PopoverButtonBasic: FC = () => {
 		onClick: dummyClickEventHandler,
 	};
 
+	const TOOLBAR_ITEMS = [
+		{
+			_label: 'Edit',
+			_icons: 'codicon codicon-edit',
+			_on: dummyEventHandler,
+		},
+		{
+			_label: 'Delete',
+			_icons: 'codicon codicon-trash',
+			_on: dummyEventHandler,
+		},
+		{
+			_label: 'Duplicate',
+			_icons: 'codicon codicon-copy',
+			_on: dummyEventHandler,
+		},
+	];
+
 	return (
 		<>
 			<SampleDescription>
@@ -24,30 +41,23 @@ export const PopoverButtonBasic: FC = () => {
 			</SampleDescription>
 			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<div className="flex flex-wrap gap-4">
-				<KolPopoverButton _label={'Open popover'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
-					<KolButton _label="Button within popover" _variant="primary" _on={dummyEventHandler} />
-					<br />
-					<br />
-					<KolButton _label="Second Button within popover" _on={dummyEventHandler} />
-				</KolPopoverButton>
+			<div className="flex flex-col gap-4">
+				<KolHeading _label="Vertical toolbar with action buttons" _level={2}></KolHeading>
 
-				<KolPopoverButton _label="Open popover" _popoverAlign="right" _icons={{ right: 'codicon codicon-chevron-right' }}>
-					<p className="w-sm">
-						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
-						Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
-					</p>
+				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolPopoverButton>
 
-				<KolPopoverButton _label="icon-only with tooltip" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
-					This is an explanation shown on click.
-				</KolPopoverButton>
+				<KolHeading _label="Info icon with help text" _level={2}></KolHeading>
 
-				<KolPopoverButton _label="">
-					<span slot="expert">
-						<u>Expert slot content</u>
-					</span>
-					This sample illustrates a button with expert slot.
+				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+					<div className="w-sm p-2 border border-solid border-gray">
+						<KolHeading _label="Help Information" _level={3}></KolHeading>
+						<p>
+							<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+							Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+						</p>
+					</div>
 				</KolPopoverButton>
 			</div>
 		</>

package/src/components/table/horizontal-scrollbar.tsx

@@ -36,7 +36,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_minWidth={hasWidthRestriction ? '600px' : '300px'}
 					_headers={HEADERS}
 					_data={DATA}
 					className="block"
@@ -47,7 +47,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_minWidth={hasWidthRestriction ? '600px' : '300px'}
 					_headers={HEADERS}
 					_data={[]}
 					className="block"

package/src/components/tabs/create-button.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import type { FC } from 'react';
+import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CreateButton: FC = () => {
+	const [tabs, setTabs] = useState([
+		{
+			_label: 'First tab',
+		},
+		{
+			_label: 'Second Tab',
+		},
+	]);
+
+	const addTab = () => {
+		setTabs([
+			...tabs,
+			{
+				_label: `Tab #${tabs.length + 1}`,
+			},
+		]);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>
+			</SampleDescription>
+
+			<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with create button" _hasCreateButton _on={{ onCreate: addTab }}>
+				{tabs.map((tab, index) => (
+					<div key={`tab-${index}`} slot={`tab-${index}`}>
+						Contents of {tab._label}
+					</div>
+				))}
+
+				<div slot="tab-1">Contents of Tab 2</div>
+			</KolTabs>
+		</>
+	);
+};

package/src/components/tabs/routes.ts

@@ -3,10 +3,12 @@ import { TabsBasic } from './basic';
 import { TabsAlign } from './align';
 import { TabsIconsOnly } from './icons-only';
 import { TabsBehavior } from './behavior';
+import { CreateButton } from './create-button';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {
 		basic: TabsBasic,
+		'create-button': CreateButton,
 		'icons-only': TabsIconsOnly,
 		behavior: TabsBehavior,
 		align: TabsAlign,

package/src/components/toolbar/basic.tsx

@@ -1,10 +1,41 @@
 import type { FC } from 'react';
 import React, { useContext } from 'react';
-import { KolBadge, KolToolbar } from '@public-ui/react';
+import { KolBadge, KolHeading, KolToolbar } from '@public-ui/react';
 import { HideMenusContext } from '../../shares/HideMenusContext';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
+	const TOOLBAR_ITEMS = [
+		{
+			_label: 'Back',
+			_hideLabel: true,
+			_icons: {
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+			},
+		},
+		{
+			_label: 'Next',
+			_hideLabel: true,
+			_icons: {
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			},
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 1',
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 3',
+		},
+		{
+			_label: 'Bold',
+		},
+	];
 	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
@@ -16,41 +47,13 @@ export const ToolbarBasic: FC = () => {
 			</SampleDescription>
 			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<KolToolbar
-				class="block w-fit"
-				_label="Toolbar"
-				_items={[
-					{
-						_label: 'Back',
-						_hideLabel: true,
-						_icons: {
-							left: {
-								icon: 'codicon codicon-arrow-left',
-							},
-						},
-					},
-					{
-						_label: 'Next',
-						_hideLabel: true,
-						_icons: {
-							right: {
-								icon: 'codicon codicon-arrow-right',
-							},
-						},
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 1',
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 3',
-					},
-					{
-						_label: 'Bold',
-					},
-				]}
-			/>
+			<div className="flex flex-col gap-4">
+				<KolHeading _label="Orientation horizontal" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} />
+
+				<KolHeading _label="Orientation vertical" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
+			</div>
 		</>
 	);
 };

package/src/react.main.tsx

@@ -1,7 +1,7 @@
+import { setTagNameTransformer } from '@public-ui/react';
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
-import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
@@ -30,7 +30,12 @@ if (ENABLE_TAG_NAME_TRANSFORMER) {
 const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
-		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
+		if (process.env.PLATFORM === 'win32') {
+			/* Add leading slash, required for ESBuild on Windows.
+			   Note: process.env.THEME_MODULE must be used literally in the import(). Moving it to a constant breaks the import. */
+			process.env.THEME_MODULE = `/${process.env.THEME_MODULE}`;
+		}
+		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(/* @vite-ignore */ process.env.THEME_MODULE)) as Record<string, Theme>;
 		return [theme];
 	}
 
@@ -129,7 +134,7 @@ void (async () => {
 		const root = createRoot(htmlDivElement);
 		root.render(
 			<StrictMode>
-				<Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+				<Router>
 					<App />
 				</Router>
 			</StrictMode>,

package/src/style.scss

@@ -63,6 +63,7 @@ hr {
 	.app-sidebar {
 		border-right: 1px solid gray;
 		position: relative;
+		z-index: 1;
 
 		& .scrollable-container-wrapper {
 			position: fixed;
@@ -83,9 +84,8 @@ hr {
 }
 
 @media print {
-
 	.no-print,
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/tsconfig.json

@@ -26,5 +26,6 @@
 		"jsxFactory": "React.createElement",
 		"jsxFragmentFactory": "React.Fragment"
 	},
-	"include": ["src/**/*", "e2e/**/*"]
+	"include": ["**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules", "dist"]
 }