@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/MdField/MdField.tsx

@@ -1,100 +1,100 @@
-// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
-// fe-ui-core MUI `MaterialField`. Same plain value/onChange contract (label,
-// error text, password reveal, multiline, maxLength, …) but renders the md3
-// `.mfield` markup — the same markup fe-main's FormMaterialField wrapper uses —
-// so call sites only swap the import. Renders correctly only inside `.md3`.
-
-import * as React from 'react';
-import classnames from 'classnames';
-
-import Icon from '../../ui/Icon';
-
-export interface MdFieldProps {
-  className?: string;
-  /** legacy contract: `field.hasError && field.error` → string | false */
-  error?: any;
-  sx?: object;
-  required?: boolean;
-  disabled?: boolean;
-  multiline?: boolean;
-  autoComplete?: string;
-  value: string;
-  type?: string;
-  name?: string;
-  rows?: number;
-  /** accepted for call-site compatibility; md3 has one field size. */
-  size?: any;
-  variant?: 'filled' | 'outlined' | 'standard';
-  label?: string;
-  placeholder?: string;
-  maxLength?: number;
-  onChange: (value: string, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-}
-
-const MdField: React.FunctionComponent<MdFieldProps> = ({
-  className, error, sx, required, disabled, multiline, autoComplete,
-  value, type, name, rows, label, placeholder, maxLength, onChange
-}) => {
-  const [reveal, setReveal] = React.useState(false);
-  const isPassword = type === 'password';
-  const inputType = isPassword && reveal ? 'text' : (type || 'text');
-  const hasError = !!error;
-  const generatedId = React.useId();
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    onChange(event.currentTarget.value, event.currentTarget.name || name, event);
-  };
-
-  return (
-    <div className={classnames('mfield-group', className)} style={sx as React.CSSProperties}>
-      {label ? (
-        <label className='md-label-sm mfield-label' htmlFor={generatedId}>
-          {label}{required ? ' *' : ''}
-        </label>
-      ) : null}
-      <div className={'mfield' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '')}>
-        {multiline ? (
-          <textarea
-            id={generatedId}
-            name={name}
-            value={value == null ? '' : value}
-            onChange={handleChange}
-            disabled={disabled}
-            rows={rows || 3}
-            maxLength={maxLength}
-            placeholder={placeholder || ''}
-            autoComplete={autoComplete}
-            style={{ width: '100%', resize: 'vertical' }}
-          />
-        ) : (
-          <input
-            id={generatedId}
-            name={name}
-            type={inputType}
-            value={value == null ? '' : value}
-            onChange={handleChange}
-            disabled={disabled}
-            maxLength={maxLength}
-            placeholder={placeholder || ''}
-            autoComplete={autoComplete}
-            style={{ width: '100%' }}
-          />
-        )}
-        {isPassword ? (
-          <button
-            type='button'
-            className='mfield-reveal'
-            aria-label={reveal ? 'Passwort verbergen' : 'Passwort anzeigen'}
-            onClick={() => setReveal(!reveal)}
-            style={{ background: 'none', border: 0, cursor: 'pointer', display: 'inline-flex', alignItems: 'center' }}
-          >
-            <Icon name={reveal ? 'eye-off' : 'eye'} size={18} />
-          </button>
-        ) : null}
-      </div>
-      {hasError ? <span className='mfield-error-text'>{error}</span> : null}
-    </div>
-  );
-};
-
-export default MdField;
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `MaterialField`. Same plain value/onChange contract (label,
+// error text, password reveal, multiline, maxLength, …) but renders the md3
+// `.mfield` markup — the same markup fe-main's FormMaterialField wrapper uses —
+// so call sites only swap the import. Renders correctly only inside `.md3`.
+
+import * as React from 'react';
+import classnames from 'classnames';
+
+import Icon from '../../ui/Icon';
+
+export interface MdFieldProps {
+  className?: string;
+  /** legacy contract: `field.hasError && field.error` → string | false */
+  error?: any;
+  sx?: object;
+  required?: boolean;
+  disabled?: boolean;
+  multiline?: boolean;
+  autoComplete?: string;
+  value: string;
+  type?: string;
+  name?: string;
+  rows?: number;
+  /** accepted for call-site compatibility; md3 has one field size. */
+  size?: any;
+  variant?: 'filled' | 'outlined' | 'standard';
+  label?: string;
+  placeholder?: string;
+  maxLength?: number;
+  onChange: (value: string, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+
+const MdField: React.FunctionComponent<MdFieldProps> = ({
+  className, error, sx, required, disabled, multiline, autoComplete,
+  value, type, name, rows, label, placeholder, maxLength, onChange
+}) => {
+  const [reveal, setReveal] = React.useState(false);
+  const isPassword = type === 'password';
+  const inputType = isPassword && reveal ? 'text' : (type || 'text');
+  const hasError = !!error;
+  const generatedId = React.useId();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    onChange(event.currentTarget.value, event.currentTarget.name || name, event);
+  };
+
+  return (
+    <div className={classnames('mfield-group', className)} style={sx as React.CSSProperties}>
+      {label ? (
+        <label className='md-label-sm mfield-label' htmlFor={generatedId}>
+          {label}{required ? ' *' : ''}
+        </label>
+      ) : null}
+      <div className={'mfield' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '')}>
+        {multiline ? (
+          <textarea
+            id={generatedId}
+            name={name}
+            value={value == null ? '' : value}
+            onChange={handleChange}
+            disabled={disabled}
+            rows={rows || 3}
+            maxLength={maxLength}
+            placeholder={placeholder || ''}
+            autoComplete={autoComplete}
+            style={{ width: '100%', resize: 'vertical' }}
+          />
+        ) : (
+          <input
+            id={generatedId}
+            name={name}
+            type={inputType}
+            value={value == null ? '' : value}
+            onChange={handleChange}
+            disabled={disabled}
+            maxLength={maxLength}
+            placeholder={placeholder || ''}
+            autoComplete={autoComplete}
+            style={{ width: '100%' }}
+          />
+        )}
+        {isPassword ? (
+          <button
+            type='button'
+            className='mfield-reveal'
+            aria-label={reveal ? 'Passwort verbergen' : 'Passwort anzeigen'}
+            onClick={() => setReveal(!reveal)}
+            style={{ background: 'none', border: 0, cursor: 'pointer', display: 'inline-flex', alignItems: 'center' }}
+          >
+            <Icon name={reveal ? 'eye-off' : 'eye'} size={18} />
+          </button>
+        ) : null}
+      </div>
+      {hasError ? <span className='mfield-error-text'>{error}</span> : null}
+    </div>
+  );
+};
+
+export default MdField;

package/compat/MdSelect/MdSelect.tsx

@@ -1,103 +1,103 @@
-// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
-// fe-ui-core MUI `MaterialSelect` / `MaterialAutocomplete` single-select usage
-// (every fe-main call site is single-select; freeSolo/multiple were never used
-// with `true`). Keeps the legacy `items` + `value` + `onChange(value)` contract
-// and delegates the control to the md3 kit `Dropdown`; extra legacy props
-// (icon, size, cbd, …) are accepted and ignored so call sites only swap the
-// import. Renders correctly only inside `.md3`.
-
-import * as React from 'react';
-import classnames from 'classnames';
-
-import Dropdown from '../../ui/Dropdown';
-
-export interface MdSelectItem {
-  value: string | number;
-  label: any;
-  isDisabled?: boolean;
-  isSeries?: boolean;
-  [extra: string]: any;
-}
-
-export interface MdSelectProps {
-  label?: string;
-  value?: any;
-  onChange: (value: any) => void;
-  items?: MdSelectItem[];
-  error?: any;
-  required?: boolean;
-  disabled?: boolean;
-  className?: string;
-  placeholder?: string;
-  sx?: object;
-  // legacy MaterialSelect/MaterialAutocomplete props, accepted for
-  // call-site compatibility and ignored (md3 Dropdown owns the look):
-  t?: (key: string, options?: object) => string;
-  namespace?: string;
-  cbd?: boolean;
-  size?: any;
-  icon?: string;
-  classNameIcon?: string;
-  selectClassName?: string;
-  amountOfItems?: number;
-  customDimensionsIcon?: boolean;
-  dense?: boolean;
-  disableClearable?: boolean;
-  disableIcon?: boolean;
-  freeSolo?: boolean;
-  multiple?: boolean;
-  isClearable?: boolean;
-  readOnly?: boolean;
-  listWithImage?: string;
-  unit?: string;
-  type?: string;
-  name?: string;
-  children?: React.ReactNode;
-}
-
-/** legacy call sites sometimes pass `{value,label}` objects as `value`. */
-const normalize = (value: any): string => {
-  if (value == null) return '';
-  if (typeof value === 'object') return normalize(value.value != null ? value.value : value.label);
-  return String(value);
-};
-
-const MdSelect: React.FunctionComponent<MdSelectProps> = ({
-  label, value, onChange, items, error, required, disabled, className, placeholder, sx
-}) => {
-  const options = (items || []).map(item => ({
-    value: normalize(item.value),
-    label: typeof item.label === 'string' || typeof item.label === 'number' ? String(item.label) : normalize(item.value),
-    disabled: !!item.isDisabled
-  }));
-  const hasError = !!error;
-
-  const handleChange = (picked: string) => {
-    const match = (items || []).find(item => normalize(item.value) === picked);
-    onChange(match ? match.value : picked);
-  };
-
-  return (
-    <div
-      className={classnames('mfield-group', className, { 'mfield-group--error': hasError })}
-      style={sx as React.CSSProperties}
-    >
-      {label ? (
-        <label className='md-label-sm mfield-label'>
-          {label}{required ? ' *' : ''}
-        </label>
-      ) : null}
-      <Dropdown
-        value={normalize(value)}
-        options={options}
-        onChange={handleChange}
-        placeholder={placeholder || (label ? label : undefined)}
-        disabled={disabled}
-        ariaLabel={label}
-      />
-      {hasError && typeof error === 'string' ? <span className='mfield-error-text'>{error}</span> : null}
-    </div>
-  );
-};
-
-export default MdSelect;
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `MaterialSelect` / `MaterialAutocomplete` single-select usage
+// (every fe-main call site is single-select; freeSolo/multiple were never used
+// with `true`). Keeps the legacy `items` + `value` + `onChange(value)` contract
+// and delegates the control to the md3 kit `Dropdown`; extra legacy props
+// (icon, size, cbd, …) are accepted and ignored so call sites only swap the
+// import. Renders correctly only inside `.md3`.
+
+import * as React from 'react';
+import classnames from 'classnames';
+
+import Dropdown from '../../ui/Dropdown';
+
+export interface MdSelectItem {
+  value: string | number;
+  label: any;
+  isDisabled?: boolean;
+  isSeries?: boolean;
+  [extra: string]: any;
+}
+
+export interface MdSelectProps {
+  label?: string;
+  value?: any;
+  onChange: (value: any) => void;
+  items?: MdSelectItem[];
+  error?: any;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  sx?: object;
+  // legacy MaterialSelect/MaterialAutocomplete props, accepted for
+  // call-site compatibility and ignored (md3 Dropdown owns the look):
+  t?: (key: string, options?: object) => string;
+  namespace?: string;
+  cbd?: boolean;
+  size?: any;
+  icon?: string;
+  classNameIcon?: string;
+  selectClassName?: string;
+  amountOfItems?: number;
+  customDimensionsIcon?: boolean;
+  dense?: boolean;
+  disableClearable?: boolean;
+  disableIcon?: boolean;
+  freeSolo?: boolean;
+  multiple?: boolean;
+  isClearable?: boolean;
+  readOnly?: boolean;
+  listWithImage?: string;
+  unit?: string;
+  type?: string;
+  name?: string;
+  children?: React.ReactNode;
+}
+
+/** legacy call sites sometimes pass `{value,label}` objects as `value`. */
+const normalize = (value: any): string => {
+  if (value == null) return '';
+  if (typeof value === 'object') return normalize(value.value != null ? value.value : value.label);
+  return String(value);
+};
+
+const MdSelect: React.FunctionComponent<MdSelectProps> = ({
+  label, value, onChange, items, error, required, disabled, className, placeholder, sx
+}) => {
+  const options = (items || []).map(item => ({
+    value: normalize(item.value),
+    label: typeof item.label === 'string' || typeof item.label === 'number' ? String(item.label) : normalize(item.value),
+    disabled: !!item.isDisabled
+  }));
+  const hasError = !!error;
+
+  const handleChange = (picked: string) => {
+    const match = (items || []).find(item => normalize(item.value) === picked);
+    onChange(match ? match.value : picked);
+  };
+
+  return (
+    <div
+      className={classnames('mfield-group', className, { 'mfield-group--error': hasError })}
+      style={sx as React.CSSProperties}
+    >
+      {label ? (
+        <label className='md-label-sm mfield-label'>
+          {label}{required ? ' *' : ''}
+        </label>
+      ) : null}
+      <Dropdown
+        value={normalize(value)}
+        options={options}
+        onChange={handleChange}
+        placeholder={placeholder || (label ? label : undefined)}
+        disabled={disabled}
+        ariaLabel={label}
+      />
+      {hasError && typeof error === 'string' ? <span className='mfield-error-text'>{error}</span> : null}
+    </div>
+  );
+};
+
+export default MdSelect;

package/compat/MdSwitch/MdSwitch.tsx

@@ -1,29 +1,29 @@
-// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
-// fe-ui-core `MaterialSwitch` ({value, onChange(value)} contract). Delegates to
-// the md3 kit Switch in controlled mode (checked + native event onChange).
-
-import * as React from 'react';
-
-import Switch from '../../ui/Switch';
-
-export interface IMdSwitchProps {
-  value: boolean;
-  disabled?: boolean;
-  onChange: (value: boolean) => void;
-  label?: string;
-  sx?: object;
-  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-}
-
-const MdSwitch: React.FC<IMdSwitchProps> = ({ value = false, disabled, onChange, label, sx }) => (
-  <span style={sx as React.CSSProperties}>
-    <Switch
-      checked={!!value}
-      disabled={disabled}
-      label={label}
-      onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.checked)}
-    />
-  </span>
-);
-
-export default MdSwitch;
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core `MaterialSwitch` ({value, onChange(value)} contract). Delegates to
+// the md3 kit Switch in controlled mode (checked + native event onChange).
+
+import * as React from 'react';
+
+import Switch from '../../ui/Switch';
+
+export interface IMdSwitchProps {
+  value: boolean;
+  disabled?: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  sx?: object;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+}
+
+const MdSwitch: React.FC<IMdSwitchProps> = ({ value = false, disabled, onChange, label, sx }) => (
+  <span style={sx as React.CSSProperties}>
+    <Switch
+      checked={!!value}
+      disabled={disabled}
+      label={label}
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.checked)}
+    />
+  </span>
+);
+
+export default MdSwitch;

package/compat/MdTabs/MdTabs.tsx

@@ -1,47 +1,47 @@
-// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
-// fe-ui-core MUI `TabsComponent` (ITabsProps contract: priceTabActiveIndex +
-// tabsTitles[{title,isDisable,children}]). Renders the md3.css `.st-tabs` /
-// `.st-tab` underline tab bar (plain buttons) + the design-neutral TabPanel.
-// Renders correctly only inside `.md3`.
-
-import * as React from 'react';
-import classnames from 'classnames';
-
-import { ITabsProps } from '../../types/types';
-import TabPanel from '../TabPanel/TabPanel';
-
-const MdTabs: React.FunctionComponent<ITabsProps> = ({
-  priceTabActiveIndex = 0,
-  onTabPriceSelect = () => undefined,
-  tabsTitles,
-  tabContentClassName = ''
-}) => {
-  return (
-    <>
-      <div role='tablist' className='st-tabs'>
-        {tabsTitles.map(({ title, isDisable }, index: number) => (
-          <button
-            type='button'
-            role='tab'
-            aria-controls={`simple-tabpanel-${index}`}
-            aria-selected={priceTabActiveIndex === index}
-            className={classnames('st-tab', { 'is-active': priceTabActiveIndex === index })}
-            id={title}
-            key={title}
-            disabled={isDisable}
-            onClick={(event) => onTabPriceSelect && onTabPriceSelect(event as any, index)}
-          >
-            {title}
-          </button>
-        ))}
-      </div>
-      {tabsTitles.map(({ children, title }, index: number) => (
-        <TabPanel value={priceTabActiveIndex} index={index} className={tabContentClassName} key={title}>
-          {children}
-        </TabPanel>
-      ))}
-    </>
-  );
-};
-
-export default MdTabs;
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `TabsComponent` (ITabsProps contract: priceTabActiveIndex +
+// tabsTitles[{title,isDisable,children}]). Renders the md3.css `.st-tabs` /
+// `.st-tab` underline tab bar (plain buttons) + the design-neutral TabPanel.
+// Renders correctly only inside `.md3`.
+
+import * as React from 'react';
+import classnames from 'classnames';
+
+import { ITabsProps } from '../../types/types';
+import TabPanel from '../TabPanel/TabPanel';
+
+const MdTabs: React.FunctionComponent<ITabsProps> = ({
+  priceTabActiveIndex = 0,
+  onTabPriceSelect = () => undefined,
+  tabsTitles,
+  tabContentClassName = ''
+}) => {
+  return (
+    <>
+      <div role='tablist' className='st-tabs'>
+        {tabsTitles.map(({ title, isDisable }, index: number) => (
+          <button
+            type='button'
+            role='tab'
+            aria-controls={`simple-tabpanel-${index}`}
+            aria-selected={priceTabActiveIndex === index}
+            className={classnames('st-tab', { 'is-active': priceTabActiveIndex === index })}
+            id={title}
+            key={title}
+            disabled={isDisable}
+            onClick={(event) => onTabPriceSelect && onTabPriceSelect(event as any, index)}
+          >
+            {title}
+          </button>
+        ))}
+      </div>
+      {tabsTitles.map(({ children, title }, index: number) => (
+        <TabPanel value={priceTabActiveIndex} index={index} className={tabContentClassName} key={title}>
+          {children}
+        </TabPanel>
+      ))}
+    </>
+  );
+};
+
+export default MdTabs;

package/compat/MdTooltip/MdTooltip.tsx

@@ -1,31 +1,31 @@
-// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
-// fe-ui-core MUI `MaterialTooltip` (info icon + hover/click tooltip). Delegates
-// to the design-neutral compat Tooltip which owns the same UX; the MUI-only
-// props (zindex, disablePortal, placement) are accepted and ignored.
-
-import * as React from 'react';
-
-import Tooltip from '../Tooltip/Tooltip';
-
-export interface IMdTooltipProps {
-  text: React.ReactNode;
-  icon?: string;
-  className?: string;
-  placement?: string;
-  disabled?: Boolean;
-  zindex?: number;
-  disablePortal?: boolean;
-}
-
-const MdTooltip: React.FC<IMdTooltipProps> = ({ text, icon, className, disabled }) => {
-  if (disabled) return null;
-  return (
-    <Tooltip
-      description={text}
-      tooltipClassName={className}
-      iconName={icon === 'infoIcon' || icon === 'InfoTransparent' ? 'info' : icon}
-    />
-  );
-};
-
-export default MdTooltip;
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `MaterialTooltip` (info icon + hover/click tooltip). Delegates
+// to the design-neutral compat Tooltip which owns the same UX; the MUI-only
+// props (zindex, disablePortal, placement) are accepted and ignored.
+
+import * as React from 'react';
+
+import Tooltip from '../Tooltip/Tooltip';
+
+export interface IMdTooltipProps {
+  text: React.ReactNode;
+  icon?: string;
+  className?: string;
+  placement?: string;
+  disabled?: Boolean;
+  zindex?: number;
+  disablePortal?: boolean;
+}
+
+const MdTooltip: React.FC<IMdTooltipProps> = ({ text, icon, className, disabled }) => {
+  if (disabled) return null;
+  return (
+    <Tooltip
+      description={text}
+      tooltipClassName={className}
+      iconName={icon === 'infoIcon' || icon === 'InfoTransparent' ? 'info' : icon}
+    />
+  );
+};
+
+export default MdTooltip;