genesys-react-components 0.1.6-devengage-1377-autofocus.120 → 0.1.8-devengage-1376.128

package/src/dxlabel/DxLabel.tsx

@@ -0,0 +1,39 @@
+import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
+import React from 'react';
+
+import './DxLabel.scss';
+
+interface IProps {
+	label?: string;
+	description?: string;
+	useFieldset?: boolean;
+	className?: string;
+	children: React.ReactNode;
+}
+
+export default function DxLabel(props: IProps) {
+	const hasLabel = props.label && props.label !== '';
+
+	const description = props.description ? (
+		<div className='input-description'>
+			<GenesysDevIcon icon={GenesysDevIcons.AppInfoSolid} />
+			<span>{props.description}</span>
+		</div>
+	) : undefined;
+
+	const contents = (
+		<React.Fragment>
+			{' '}
+			{hasLabel ? <span className='label-text'>{props.label}</span> : undefined}
+			{props.children}
+			{description}
+		</React.Fragment>
+	);
+
+	const className = `dx-label${props.className ? ' ' + props.className : ''}`;
+
+	if (props.useFieldset) {
+		return <fieldset className={className}>{contents}</fieldset>;
+	}
+	return <label className={className}>{contents}</label>;
+}

package/src/dxtabbedcontent/DxTabPanel.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DxTabPanelProps } from '..';
+
+import './DxTabPanel.scss';
+
+export default function DxTabPanel(props: DxTabPanelProps) {
+	return <div className={`dx-tab-panel${props.className ? ' ' + props.className : ''}`}>{props.children}</div>;
+}

package/src/dxtabbedcontent/DxTabbedContent.scss

@@ -0,0 +1,45 @@
+.dx-tabbed-content {
+	margin: 40px 0;
+
+	.tab-titles {
+		border-bottom: 1px solid #bfd4e4;
+		font-weight: normal;
+		font-size: 14px;
+		line-height: 20px;
+
+		.tab-title {
+			display: inline-block;
+			padding: 5px 20px;
+			border-bottom: 1px solid transparent;
+			cursor: pointer;
+
+			&:hover {
+				border-color: #bfd4e4;
+			}
+
+			&.active {
+				border-bottom-color: #597393;
+				font-weight: bold;
+			}
+
+			// Make markdown-parsed paragraphs look normal
+			& p {
+				margin: 0;
+				display: inline;
+			}
+		}
+	}
+
+	.tab-content {
+		padding: 13px 20px 20px 20px;
+		border-bottom: 1px solid #bfd4e4;
+
+		// Clear excess margins from content, we provide the padding
+		& > *:first-child {
+			margin-top: 0;
+		}
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

package/src/dxtabbedcontent/DxTabbedContent.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { DxTabbedContentProps } from '..';
+
+import './DxTabbedContent.scss';
+
+export default function DxTabbedContent(props: DxTabbedContentProps) {
+	const [activeTab, setActiveTab] = useState(props.initialTabId || 0);
+	const [titles] = useState<React.ReactNode[]>(
+		// Scrape titles from child elements
+		React.Children.toArray(props.children).map((child: any) => {
+			if (!child || !child.props || !child.props.title) return 'Unknown title';
+			return child.props.title;
+		})
+	);
+
+	return (
+		<div className={`dx-tabbed-content${props.className ? ' ' + props.className : ''}`}>
+			<div className='tab-titles'>
+				{titles.map((title, i) => (
+					<span key={i} className={`tab-title${i === activeTab ? ' active' : ''}`} onClick={() => setActiveTab(i)}>
+						{title}
+					</span>
+				))}
+			</div>
+			<div className='tab-content'>{React.Children.toArray(props.children)[activeTab]}</div>
+		</div>
+	);
+}

package/src/dxtextbox/DxTextbox.scss

@@ -0,0 +1,107 @@
+.dx-textbox {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;
+	gap: 10px;
+	border: 1px solid #c6cbd1;
+	border-radius: 2px;
+	margin: 0;
+	padding: 0 10px;
+	height: 32px;
+	background-color: #ffffff;
+
+	&.with-label {
+		margin-top: 0;
+	}
+
+	&:focus-within {
+		outline: #aac9ff solid 2px;
+	}
+
+	.icon {
+		display: block;
+		flex: none;
+		color: #75757a;
+
+		&.input-icon {
+			font-size: 14px;
+			line-height: 0;
+		}
+
+		&.clear-icon {
+			font-size: 11px;
+			line-height: 0;
+			cursor: pointer;
+			padding: 4px;
+			margin-right: -4px;
+		}
+	}
+
+	.dx-input {
+		flex-grow: 1;
+		border: 0;
+		background: transparent;
+		box-sizing: border-box;
+		height: 32px;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		font-family: Roboto;
+		font-style: normal;
+		font-weight: normal;
+		font-size: 14px;
+		line-height: 16px;
+		color: #272d2d;
+
+		&:focus-visible {
+			outline: 0;
+		}
+
+		&::placeholder {
+			font-style: normal;
+			font-weight: 300;
+			font-size: 14px;
+			line-height: 16px;
+			color: #757576;
+		}
+	}
+
+	&.disabled {
+		background-color: #e6ebec;
+		border-color: #e8eaed;
+		cursor: not-allowed;
+
+		input {
+			cursor: not-allowed;
+			color: #75757a;
+		}
+
+		.icon,
+		input::placeholder {
+			color: #ffffff;
+		}
+	}
+}
+
+.dx-textarea {
+	padding: 10px;
+	border: 1px solid #c6cbd1;
+	border-radius: 2px;
+	width: 100%;
+	font-family: 'Roboto', sans-serif;
+	box-sizing: border-box;
+
+	&:focus-within {
+		outline: #aac9ff solid 2px;
+	}
+
+	&::placeholder {
+		font-family: 'Roboto', sans-serif;
+		font-style: normal;
+		font-weight: 300;
+		font-size: 14px;
+		line-height: 16px;
+		color: #757576;
+	}
+}

package/src/dxtextbox/DxTextbox.tsx

@@ -0,0 +1,159 @@
+import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
+import React, { useEffect, useRef, useState } from 'react';
+import DxLabel from '../dxlabel/DxLabel';
+import { DxTextboxProps } from '..';
+
+import './DxTextbox.scss';
+
+export default function DxTextbox(props: DxTextboxProps) {
+	const [debounceMs, setDebounceMs] = useState(props.changeDebounceMs || 300);
+	const [value, setValue] = useState(props.initialValue || props.value || '');
+	const [isFocused, setIsFocused] = useState(false);
+	const [escapePressed, setEscapePressed] = useState(Date.now());
+	const [step, setStep] = useState<string | number | undefined>(undefined);
+	let [timer, setTimer] = useState(undefined as unknown as ReturnType<typeof setTimeout>);
+
+	// Constructor
+	useEffect(() => {
+		// Register global key bindings
+		document.addEventListener('keydown', globalKeyBindings, false);
+
+		return () => {
+			document.removeEventListener('keydown', globalKeyBindings, false);
+		};
+	}, []);
+
+	// Value prop updated
+	useEffect(() => {
+		// Ignore value changed if initial value was set; they're mutually exclusive
+		if (!props.initialValue) {
+			setValue(props.value || '');
+		}
+	}, [props.value]);
+
+	// Escape pressed
+	useEffect(() => {
+		if (!isFocused) return;
+		setValue('');
+		inputRef.current?.blur();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [escapePressed]);
+
+	// Value changed
+	useEffect(() => {
+		if (props.inputType === 'decimal') {
+			// Normalize step setting
+			if (!isNaN(parseFloat(value))) {
+				const match = /\.(.+)/.exec(value);
+				console.log(match);
+				if (match) {
+					const s = `0.${Array.apply(null, Array(match[1].length - 1))
+						.map(() => '0')
+						.join('')}1`;
+					console.log(s);
+					setStep(s);
+				}
+			}
+		} else if (props.inputType === 'integer') {
+			// Overwrite value as integer to forcibly truncate floating point numbers
+			setValue(parseInt(value).toString());
+		}
+
+		// Debounce onChange notification
+		if (!props.onChange) return;
+		clearTimeout(timer);
+		setTimer(setTimeout(() => (props.onChange ? props.onChange(value) : undefined), debounceMs));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [value]);
+
+	// Update state from props
+	useEffect(() => {
+		setDebounceMs(props.changeDebounceMs || 300);
+	}, [props.changeDebounceMs]);
+
+	// Normalize inputRef
+	let inputRef; // = useRef<HTMLInputElement>(null);
+	if (props.inputRef) inputRef = props.inputRef;
+	else if (props.inputType === 'textarea') inputRef = useRef<HTMLTextAreaElement>(null);
+	else inputRef = useRef<HTMLInputElement>(null);
+
+	const hasLabel = props.label && props.label !== '';
+
+	// Global key bindings
+	function globalKeyBindings(event: KeyboardEvent) {
+		// Escape - cancel search
+		if (event.key === 'Escape') {
+			event.stopPropagation();
+			event.preventDefault();
+			setEscapePressed(Date.now());
+			return;
+		}
+	}
+
+	// Normalize input type
+	let inputType: React.HTMLInputTypeAttribute | undefined = props.inputType;
+	if (inputType === 'integer' || inputType === 'decimal') inputType = 'number';
+
+	let component;
+	switch (inputType) {
+		case 'textarea': {
+			component = (
+				<textarea
+					className="dx-textarea"
+					placeholder={props.placeholder}
+					ref={inputRef}
+					value={value}
+					onChange={(e) => setValue(e.target.value)}
+					onFocus={() => {
+						setIsFocused(true);
+						if (props.onFocus) props.onFocus();
+					}}
+					onBlur={() => {
+						setIsFocused(false);
+						if (props.onBlur) props.onBlur();
+					}}
+					disabled={props.disabled === true}
+					autoFocus={props.autoFocus}
+				/>
+			);
+			break;
+		}
+		// TODO: special handling for other inputType values
+		default: {
+			component = (
+				<div className={`dx-textbox${hasLabel ? ' with-label' : ''}${props.disabled ? ' disabled' : ''}`}>
+					{props.icon ? <GenesysDevIcon icon={props.icon} className="input-icon" /> : undefined}
+					<input
+						className="dx-input"
+						type={inputType}
+						step={step}
+						value={value}
+						placeholder={props.placeholder}
+						onChange={(e) => setValue(e.target.value)}
+						ref={inputRef}
+						onFocus={() => {
+							setIsFocused(true);
+							if (props.onFocus) props.onFocus();
+						}}
+						onBlur={() => {
+							setIsFocused(false);
+							if (props.onBlur) props.onBlur();
+						}}
+						disabled={props.disabled === true}
+						autoFocus={props.autoFocus}
+					/>
+					{props.clearButton && (value || isFocused) && !props.disabled ? (
+						<GenesysDevIcon icon={GenesysDevIcons.AppTimes} className="clear-icon" onClick={() => setValue('')} />
+					) : undefined}
+				</div>
+			);
+		}
+	}
+
+	// Render
+	return (
+		<DxLabel label={props.label} description={props.description} className={props.className}>
+			{component}
+		</DxLabel>
+	);
+}

package/src/dxtoggle/DxToggle.scss

@@ -0,0 +1,76 @@
+.dx-toggle-container {
+	display: inline-block;
+	.dx-toggle {
+		background: #f5f8fb;
+		border: 1px solid #c6cbd1;
+		border-radius: 6px;
+		height: 26px;
+		// width: 72px;
+		padding: 0px 4px;
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-between;
+		align-items: center;
+		gap: 2px;
+		cursor: pointer;
+
+		&:hover {
+			.slider {
+				border-color: #aac9ff;
+			}
+		}
+
+		.icon {
+			font-size: 10px;
+			line-height: 0;
+			margin: 0 5px;
+			color: #c4c4c4;
+		}
+
+		.clear-placeholder {
+			width: 19px;
+			padding: 0 1px 0 0;
+			margin: 0;
+			display: block;
+		}
+
+		.slider {
+			height: 22px;
+			width: 22px;
+			border-radius: 22px;
+			background-color: #419bb2;
+			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border: 1px solid transparent;
+
+			.icon {
+				font-size: 10px;
+				line-height: 0;
+				color: #ffffff;
+				padding: 0;
+				margin: 0;
+			}
+		}
+	}
+
+	&.disabled {
+		.dx-toggle {
+			border-color: #e8eaed;
+			color: #ffffff;
+			cursor: not-allowed;
+
+			&:hover {
+				.slider {
+					border-color: transparent;
+				}
+			}
+
+			.slider {
+				color: #8a9a9e;
+				background-color: #e0e6e8;
+			}
+		}
+	}
+}

package/src/dxtoggle/DxToggle.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
+import { BooleanChangedCallback, DxToggleProps } from '..';
+
+import './DxToggle.scss';
+import DxLabel from '../dxlabel/DxLabel';
+
+export default function DxToggle(props: DxToggleProps) {
+	let initialValue: boolean | undefined = props.value !== undefined ? props.value : props.initialValue;
+	if (!props.isTriState) initialValue = initialValue || false;
+
+	const [value, setValue] = useState<boolean | undefined>(initialValue);
+
+	const trueIcon = props.trueIcon || GenesysDevIcons.AppCheck;
+	const falseIcon = props.falseIcon || GenesysDevIcons.AppTimes;
+
+	useEffect(() => {
+		if (props.initialValue || props.value === value || (!props.isTriState && props.value === undefined)) return;
+		setValue(props.value);
+	}, [props.value]);
+
+	useEffect(() => {
+		if (props.onChange) props.onChange(value);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [value]);
+
+	const toggleValue = () => {
+		if (props.disabled) return;
+		if (props.isTriState) {
+			if (value === undefined) setValue(true);
+			else if (value === true) setValue(false);
+			else setValue(undefined);
+		} else {
+			setValue(!value);
+		}
+	};
+
+	return (
+		<DxLabel label={props.label} description={props.description} className={props.className}>
+			<div className={`dx-toggle-container${props.disabled ? ' disabled' : ''}`}>
+				<div className='dx-toggle' onClick={toggleValue}>
+					{value !== false ? <GenesysDevIcon icon={falseIcon} /> : undefined}
+					{value === true && props.isTriState ? <div className='clear-placeholder'>&nbsp;</div> : undefined}
+					<div className='slider'>{value !== undefined ? <GenesysDevIcon icon={value ? trueIcon : falseIcon} /> : undefined}</div>
+					{value === false && props.isTriState ? <div className='clear-placeholder'>&nbsp;</div> : undefined}
+					{value !== true ? <GenesysDevIcon icon={trueIcon} /> : undefined}
+				</div>
+			</div>
+		</DxLabel>
+	);
+}

package/src/index.ts

@@ -0,0 +1,141 @@
+import { GenesysDevIcons } from 'genesys-dev-icons';
+import DxAccordion from './dxaccordion/DxAccordion';
+import DxAccordionGroup from './dxaccordion/DxAccordionGroup';
+import DxButton from './dxbutton/DxButton';
+import DxItemGroup from './dxitemgroup/DxItemGroup';
+import DxCheckbox from './dxitemgroup/DxCheckbox';
+import DxLabel from './dxlabel/DxLabel';
+import DxTabbedContent from './dxtabbedcontent/DxTabbedContent';
+import DxTabPanel from './dxtabbedcontent/DxTabPanel';
+import DxTextbox from './dxtextbox/DxTextbox';
+import DxToggle from './dxtoggle/DxToggle';
+import AlertBlock from './alertblock/AlertBlock';
+import LoadingPlaceholder from './loadingplaceholder/LoadingPlaceholder';
+import Tooltip from './tooltip/Tooltip';
+import CopyButton from './copybutton/CopyButton';
+
+export {
+	DxAccordion,
+	DxAccordionGroup,
+	DxButton,
+	DxItemGroup,
+	DxCheckbox,
+	DxLabel,
+	DxTabbedContent,
+	DxTabPanel,
+	DxTextbox,
+	DxToggle,
+	Tooltip,
+	CopyButton,
+	LoadingPlaceholder,
+	AlertBlock,
+};
+
+export interface StringChangedCallback {
+	(value: string): void;
+}
+
+export interface BooleanChangedCallback {
+	(value?: boolean): void;
+}
+
+export interface CheckedChangedCallback {
+	(checked: boolean): void;
+}
+
+export interface VoidEventCallback {
+	(): void;
+}
+
+// Item in a DxItemGroup
+export interface DxItemGroupItem {
+	label: string;
+	value: string;
+	disabled?: boolean;
+	isSelected?: boolean;
+}
+
+// Item value of a DxItemGroupItem in a DxItemGroup
+export interface DxItemGroupItemValue {
+	item: DxItemGroupItem;
+	isSelected: boolean;
+}
+
+export interface ItemChangedCallback {
+	(item: DxItemGroupItem, isSelected: boolean): void;
+}
+
+export interface ItemGroupChangedCallback {
+	(items: DxItemGroupItemValue[]): void;
+}
+
+export interface DxToggleProps {
+	isTriState?: boolean;
+	initialValue?: boolean;
+	value?: boolean;
+	label?: string;
+	description?: string;
+	trueIcon?: GenesysDevIcons;
+	falseIcon?: GenesysDevIcons;
+	disabled?: boolean;
+	onChange?: BooleanChangedCallback;
+	className?: string;
+}
+
+export type DxTextboxType = 'text' | 'textarea' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';
+
+export interface DxTextboxProps {
+	initialValue?: string;
+	value?: string;
+	inputType?: DxTextboxType;
+	label?: string;
+	description?: string;
+	placeholder?: string;
+	icon?: GenesysDevIcons;
+	clearButton?: boolean;
+	onChange?: StringChangedCallback;
+	changeDebounceMs?: number;
+	inputRef?: React.RefObject<HTMLInputElement>;
+	onFocus?: VoidEventCallback;
+	onBlur?: VoidEventCallback;
+	disabled?: boolean;
+	className?: string;
+	autoFocus?: boolean;
+}
+
+export interface DxAccordionProps {
+	title: React.ReactNode;
+	children: React.ReactNode;
+	showOpen?: boolean;
+	className?: string;
+	expandTrigger?: any;
+	showOpenTrigger?: any;
+	containerId?: string;
+	headingIcon?: any;
+	headingColor?: string;
+}
+
+export interface DxItemGroupProps {
+	title?: string;
+	description?: string;
+	format: DxItemGroupFormat;
+	items: DxItemGroupItem[];
+	disabled?: boolean;
+	className?: string;
+	onItemChanged?: ItemChangedCallback;
+	onItemsChanged?: ItemGroupChangedCallback;
+}
+
+export type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
+
+export interface DxTabbedContentProps {
+	children: React.ReactNode;
+	initialTabId?: number;
+	className?: string;
+}
+
+export interface DxTabPanelProps {
+	title: React.ReactNode;
+	children: React.ReactNode;
+	className?: string;
+}