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

package/compat/MagnifyGlass/MagnifyGlass.tsx

@@ -1,213 +1,213 @@
-import * as React from 'react';
-import _debounce from 'lodash/debounce';
-import classnames from 'classnames';
-import Image from '../Image/Image';
-
-import styles from './MagnifyGlass.styl';
-
-export interface IImageProps {
-  src?: string;
-  srcSmall?: string;
-  srcLarge?: string;
-
-  className?: string;
-  alt?: string;
-  title?: string;
-
-  width: number | string;
-  height?: number | string;
-
-  // Ratio is more important than height in current setup
-  // So if you pass height manually it will be ignored.
-  ratioH?: number;
-  ratioW?: number;
-
-  style?: { [key: string]: string | number };
-
-  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-  onClick?: (event: React.MouseEvent<HTMLImageElement>) => void;
-}
-
-export interface IMagnifyGlassProps extends IImageProps {
-  /* Zoom image */
-  zoomFactor?: number;
-
-  /* Magnifying glass */
-  mgWidth?: number;
-  mgHeight?: number;
-}
-
-export interface IMagnifyGlassState {
-  showZoom: boolean;
-
-  imageBounds: ClientRect;
-  imageLoaded: boolean;
-}
-
-const debounceTime = 200;
-
-function withMagnifyGlassImage(WrappedComponent: typeof Image) {
-  return class MagnifyGlass extends React.Component<IMagnifyGlassProps, IMagnifyGlassState> {
-    static readonly defaultProps = {
-      /* Zoom image */
-      zoomFactor: 1.5,
-
-      /* Magnifying glass */
-      mgWidth: 200,
-      mgHeight: 200,
-
-      onLoad: () => {}
-    };
-
-    private readonly wrappedComponent: React.RefObject<any> = null;
-    private readonly glass: React.RefObject<any> = null;
-
-    constructor(props: IMagnifyGlassProps) {
-      super(props);
-
-      this.state = {
-        showZoom: false,
-
-        imageBounds: null,
-        imageLoaded: false
-      };
-
-      this.wrappedComponent = React.createRef();
-      this.glass = React.createRef();
-    }
-
-    componentWillUnmount() {
-      const { imageBounds } = this.state;
-
-      if (!!imageBounds) {
-        const wrappedImage = this.wrappedComponent.current.image.current;
-
-        /* Remove all event listeners */
-        wrappedImage.removeEventListener('mousemove', this.onMouseMove);
-        wrappedImage.removeEventListener('mouseout', this.onMouseOut);
-        wrappedImage.removeEventListener('mouseenter', this.onMouseEnter);
-      }
-
-      this.calcImageBounds.cancel();
-      this.calcImageBounds = null;
-    }
-
-    componentDidUpdate(_: IMagnifyGlassProps, prevState: IMagnifyGlassState) {
-      const { imageLoaded } = this.state;
-      if (prevState.imageLoaded !== imageLoaded) {
-        if (imageLoaded) {
-          /* getting ref to original image from Image component */
-          const wrappedImage = this.wrappedComponent.current.image.current;
-
-          wrappedImage.addEventListener('mousemove', this.onMouseMove);
-          wrappedImage.addEventListener('mouseout', this.onMouseOut);
-          wrappedImage.addEventListener('mouseenter', this.onMouseEnter);
-        }
-      }
-    }
-
-    onMouseMove = (e: React.MouseEvent<HTMLElement>): void => {
-      const { imageBounds } = this.state;
-
-      if (!!imageBounds) {
-        window.requestAnimationFrame(() => {
-          const { imageLoaded, imageBounds } = this.state;
-          const { mgWidth, mgHeight, zoomFactor } = this.props;
-
-          const { left: leftBound, top: topBound, width, height } = imageBounds;
-
-          if (imageLoaded && imageBounds) {
-            const glass = this.glass.current;
-
-            const relX = e.clientX - leftBound;
-            const relY = e.clientY - topBound;
-
-            const bgX = -(relX * zoomFactor - mgWidth / 2);
-            const bgY = -(relY * zoomFactor - mgHeight / 2);
-
-            const left = relX - mgWidth / 2;
-            const top = relY - mgHeight / 2;
-
-            glass.style.left = `${left}px`;
-            glass.style.top = `${top}px`;
-            glass.style.backgroundPosition = `${bgX}px ${bgY}px`;
-            glass.style.backgroundSize = `${width * zoomFactor}px ${height * zoomFactor}px`;
-          }
-        });
-      }
-    };
-
-    onMouseOut = (): void => {
-      this.setState({ showZoom: false });
-    };
-
-    onMouseEnter = (): void => {
-      this.calcImageBounds();
-      this.setState({ showZoom: true });
-    };
-
-    calcImageBounds = _debounce(
-      (): void => {
-        const { imageLoaded } = this.state;
-
-        if (imageLoaded) {
-          const wrappedImage = this.wrappedComponent.current.image.current;
-
-          this.setState({ imageBounds: wrappedImage.getBoundingClientRect() });
-        }
-      },
-      debounceTime, { trailing: true }
-    );
-
-    handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
-      this.setState({ imageLoaded: true });
-
-      if (this.calcImageBounds) {
-        this.calcImageBounds();
-      }
-
-      this.props.onLoad(event);
-    };
-
-    render(): JSX.Element {
-      const { src, srcSmall, srcLarge, zoomFactor, mgHeight, mgWidth, onLoad, ...rest } = this.props;
-      const { showZoom, imageBounds } = this.state;
-
-      const imageProps = {
-        src,
-        srcSmall,
-        srcLarge,
-        ref: this.wrappedComponent,
-        onLoad: this.handleImageLoad,
-        ...rest
-      };
-
-      const inlineStyles = !!imageBounds ? {
-        width: mgWidth,
-        height: mgHeight,
-        backgroundImage: src ? `url(${src})` : `url(${srcLarge})`,
-        backgroundSize: `${zoomFactor * imageBounds.width}% ${zoomFactor * imageBounds.height}%`
-      } : {};
-
-      return (
-        <div className={classnames(styles.magnifier, { [styles.withZoom]: showZoom })}>
-          <WrappedComponent {...imageProps} />
-
-          {!!imageBounds && (
-            <div className={styles.mgWrapper} style={{ width: imageBounds.width, height: imageBounds.height }}>
-              <div
-                className={classnames(styles.mgGlass, { [styles.visible]: showZoom })}
-                style={{ ...inlineStyles }}
-                ref={this.glass}
-              />
-            </div>
-          )}
-
-        </div>
-      );
-    }
-  };
-}
-
-export default withMagnifyGlassImage;
+import * as React from 'react';
+import _debounce from 'lodash/debounce';
+import classnames from 'classnames';
+import Image from '../Image/Image';
+
+import styles from './MagnifyGlass.styl';
+
+export interface IImageProps {
+  src?: string;
+  srcSmall?: string;
+  srcLarge?: string;
+
+  className?: string;
+  alt?: string;
+  title?: string;
+
+  width: number | string;
+  height?: number | string;
+
+  // Ratio is more important than height in current setup
+  // So if you pass height manually it will be ignored.
+  ratioH?: number;
+  ratioW?: number;
+
+  style?: { [key: string]: string | number };
+
+  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLImageElement>) => void;
+}
+
+export interface IMagnifyGlassProps extends IImageProps {
+  /* Zoom image */
+  zoomFactor?: number;
+
+  /* Magnifying glass */
+  mgWidth?: number;
+  mgHeight?: number;
+}
+
+export interface IMagnifyGlassState {
+  showZoom: boolean;
+
+  imageBounds: ClientRect;
+  imageLoaded: boolean;
+}
+
+const debounceTime = 200;
+
+function withMagnifyGlassImage(WrappedComponent: typeof Image) {
+  return class MagnifyGlass extends React.Component<IMagnifyGlassProps, IMagnifyGlassState> {
+    static readonly defaultProps = {
+      /* Zoom image */
+      zoomFactor: 1.5,
+
+      /* Magnifying glass */
+      mgWidth: 200,
+      mgHeight: 200,
+
+      onLoad: () => {}
+    };
+
+    private readonly wrappedComponent: React.RefObject<any> = null;
+    private readonly glass: React.RefObject<any> = null;
+
+    constructor(props: IMagnifyGlassProps) {
+      super(props);
+
+      this.state = {
+        showZoom: false,
+
+        imageBounds: null,
+        imageLoaded: false
+      };
+
+      this.wrappedComponent = React.createRef();
+      this.glass = React.createRef();
+    }
+
+    componentWillUnmount() {
+      const { imageBounds } = this.state;
+
+      if (!!imageBounds) {
+        const wrappedImage = this.wrappedComponent.current.image.current;
+
+        /* Remove all event listeners */
+        wrappedImage.removeEventListener('mousemove', this.onMouseMove);
+        wrappedImage.removeEventListener('mouseout', this.onMouseOut);
+        wrappedImage.removeEventListener('mouseenter', this.onMouseEnter);
+      }
+
+      this.calcImageBounds.cancel();
+      this.calcImageBounds = null;
+    }
+
+    componentDidUpdate(_: IMagnifyGlassProps, prevState: IMagnifyGlassState) {
+      const { imageLoaded } = this.state;
+      if (prevState.imageLoaded !== imageLoaded) {
+        if (imageLoaded) {
+          /* getting ref to original image from Image component */
+          const wrappedImage = this.wrappedComponent.current.image.current;
+
+          wrappedImage.addEventListener('mousemove', this.onMouseMove);
+          wrappedImage.addEventListener('mouseout', this.onMouseOut);
+          wrappedImage.addEventListener('mouseenter', this.onMouseEnter);
+        }
+      }
+    }
+
+    onMouseMove = (e: React.MouseEvent<HTMLElement>): void => {
+      const { imageBounds } = this.state;
+
+      if (!!imageBounds) {
+        window.requestAnimationFrame(() => {
+          const { imageLoaded, imageBounds } = this.state;
+          const { mgWidth, mgHeight, zoomFactor } = this.props;
+
+          const { left: leftBound, top: topBound, width, height } = imageBounds;
+
+          if (imageLoaded && imageBounds) {
+            const glass = this.glass.current;
+
+            const relX = e.clientX - leftBound;
+            const relY = e.clientY - topBound;
+
+            const bgX = -(relX * zoomFactor - mgWidth / 2);
+            const bgY = -(relY * zoomFactor - mgHeight / 2);
+
+            const left = relX - mgWidth / 2;
+            const top = relY - mgHeight / 2;
+
+            glass.style.left = `${left}px`;
+            glass.style.top = `${top}px`;
+            glass.style.backgroundPosition = `${bgX}px ${bgY}px`;
+            glass.style.backgroundSize = `${width * zoomFactor}px ${height * zoomFactor}px`;
+          }
+        });
+      }
+    };
+
+    onMouseOut = (): void => {
+      this.setState({ showZoom: false });
+    };
+
+    onMouseEnter = (): void => {
+      this.calcImageBounds();
+      this.setState({ showZoom: true });
+    };
+
+    calcImageBounds = _debounce(
+      (): void => {
+        const { imageLoaded } = this.state;
+
+        if (imageLoaded) {
+          const wrappedImage = this.wrappedComponent.current.image.current;
+
+          this.setState({ imageBounds: wrappedImage.getBoundingClientRect() });
+        }
+      },
+      debounceTime, { trailing: true }
+    );
+
+    handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
+      this.setState({ imageLoaded: true });
+
+      if (this.calcImageBounds) {
+        this.calcImageBounds();
+      }
+
+      this.props.onLoad(event);
+    };
+
+    render(): JSX.Element {
+      const { src, srcSmall, srcLarge, zoomFactor, mgHeight, mgWidth, onLoad, ...rest } = this.props;
+      const { showZoom, imageBounds } = this.state;
+
+      const imageProps = {
+        src,
+        srcSmall,
+        srcLarge,
+        ref: this.wrappedComponent,
+        onLoad: this.handleImageLoad,
+        ...rest
+      };
+
+      const inlineStyles = !!imageBounds ? {
+        width: mgWidth,
+        height: mgHeight,
+        backgroundImage: src ? `url(${src})` : `url(${srcLarge})`,
+        backgroundSize: `${zoomFactor * imageBounds.width}% ${zoomFactor * imageBounds.height}%`
+      } : {};
+
+      return (
+        <div className={classnames(styles.magnifier, { [styles.withZoom]: showZoom })}>
+          <WrappedComponent {...imageProps} />
+
+          {!!imageBounds && (
+            <div className={styles.mgWrapper} style={{ width: imageBounds.width, height: imageBounds.height }}>
+              <div
+                className={classnames(styles.mgGlass, { [styles.visible]: showZoom })}
+                style={{ ...inlineStyles }}
+                ref={this.glass}
+              />
+            </div>
+          )}
+
+        </div>
+      );
+    }
+  };
+}
+
+export default withMagnifyGlassImage;

package/compat/MdAccordionGroup/MdAccordionGroup.tsx

@@ -1,53 +1,53 @@
-// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
-// fe-ui-core MUI `MaterialAccordionGroup` (cookie-settings accordion with an
-// optional switch in the header). Renders the md3 `.macc` chrome manually —
-// the kit Accordion's header is a <button>, and nesting the switch inside a
-// button would be invalid/unclickable, so the header here is a div with its
-// own keyboard handling and the switch stops propagation.
-
-import React, { useState } from 'react';
-
-import Icon from '../../ui/Icon';
-import MdSwitch from '../MdSwitch/MdSwitch';
-import MdTooltip from '../MdTooltip/MdTooltip';
-
-interface IMdAccordionGroupProps {
-  title?: string;
-  tooltipText?: string;
-  children?: any;
-  switchProps?: any;
-  withSwitch?: boolean;
-}
-
-const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText, children, switchProps, withSwitch }) => {
-  const [open, setOpen] = useState(false);
-  const toggle = () => setOpen(!open);
-
-  return (
-    <section className={'macc ' + (open ? 'macc--open' : 'macc--closed')}>
-      <div
-        className='macc-hd'
-        role='button'
-        tabIndex={0}
-        aria-expanded={open}
-        onClick={toggle}
-        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}
-        style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', width: '100%' }}
-      >
-        <span className='macc-hd-text' style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
-          <span className='macc-title md-title'>{title}</span>
-          {!!tooltipText && <MdTooltip icon='infoIcon' text={tooltipText} />}
-        </span>
-        {withSwitch ? (
-          <span style={{ marginLeft: 'auto' }} onClick={(e) => e.stopPropagation()}>
-            <MdSwitch {...switchProps} />
-          </span>
-        ) : null}
-        <Icon name='chevron-down' cls='macc-chev' />
-      </div>
-      {open ? <div style={{ padding: '4px 0 12px' }}>{children}</div> : null}
-    </section>
-  );
-};
-
-export default MdAccordionGroup;
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `MaterialAccordionGroup` (cookie-settings accordion with an
+// optional switch in the header). Renders the md3 `.macc` chrome manually —
+// the kit Accordion's header is a <button>, and nesting the switch inside a
+// button would be invalid/unclickable, so the header here is a div with its
+// own keyboard handling and the switch stops propagation.
+
+import React, { useState } from 'react';
+
+import Icon from '../../ui/Icon';
+import MdSwitch from '../MdSwitch/MdSwitch';
+import MdTooltip from '../MdTooltip/MdTooltip';
+
+interface IMdAccordionGroupProps {
+  title?: string;
+  tooltipText?: string;
+  children?: any;
+  switchProps?: any;
+  withSwitch?: boolean;
+}
+
+const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText, children, switchProps, withSwitch }) => {
+  const [open, setOpen] = useState(false);
+  const toggle = () => setOpen(!open);
+
+  return (
+    <section className={'macc ' + (open ? 'macc--open' : 'macc--closed')}>
+      <div
+        className='macc-hd'
+        role='button'
+        tabIndex={0}
+        aria-expanded={open}
+        onClick={toggle}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }}
+        style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', width: '100%' }}
+      >
+        <span className='macc-hd-text' style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+          <span className='macc-title md-title'>{title}</span>
+          {!!tooltipText && <MdTooltip icon='infoIcon' text={tooltipText} />}
+        </span>
+        {withSwitch ? (
+          <span style={{ marginLeft: 'auto' }} onClick={(e) => e.stopPropagation()}>
+            <MdSwitch {...switchProps} />
+          </span>
+        ) : null}
+        <Icon name='chevron-down' cls='macc-chev' />
+      </div>
+      {open ? <div style={{ padding: '4px 0 12px' }}>{children}</div> : null}
+    </section>
+  );
+};
+
+export default MdAccordionGroup;

package/compat/MdCheckbox/MdCheckbox.tsx

@@ -1,69 +1,69 @@
-// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
-// fe-ui-core MUI `CheckboxMaterial` / `FormCheckboxMaterial` plain-props usage
-// (checked/onChange/label — NOT the mobx-field binding, which the md3 kit
-// `FormCheckbox` owns). Renders the same `.mcheck` markup as the kit. Extra
-// legacy props (labelPlacement, icon, …) 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 Icon from '../../ui/Icon';
-
-export interface MdCheckboxProps {
-  name?: string;
-  value?: any;
-  checked?: boolean;
-  disabled?: boolean;
-  label?: React.ReactNode;
-  error?: boolean;
-  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any) => void;
-  className?: string;
-  // legacy CheckboxMaterial props, accepted for call-site compatibility and ignored:
-  containerClassName?: string;
-  checkboxClassName?: string;
-  labelClassName?: string;
-  tooltipDescription?: string;
-  tooltipPosX?: string;
-  aggregation?: number;
-  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  icon?: any;
-  checkedIcon?: any;
-  type?: string;
-  content?: React.ReactNode;
-  radio?: boolean;
-  formControlClassName?: string;
-  contentType?: string;
-}
-
-const MdCheckbox: React.FunctionComponent<MdCheckboxProps> = ({
-  name, value, checked, disabled, label, error, onChange, className, content
-}) => {
-  const isChecked = !!checked;
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChange) onChange(event, event.target.checked, value);
-  };
-
-  return (
-    <div className={classnames('mcheck-group', className, { 'mcheck-group--error': !!error })}>
-      <label className={'mcheck' + (disabled ? ' mcheck--disabled' : '')}>
-        <input
-          type='checkbox'
-          className='mcheck-input'
-          name={name}
-          checked={isChecked}
-          disabled={disabled}
-          aria-checked={isChecked}
-          aria-invalid={!!error || undefined}
-          onChange={handleChange}
-        />
-        <span className='mcheck-box' aria-hidden='true'>
-          {isChecked ? <Icon name='check' size={16} stroke={3} cls='mcheck-tick' /> : null}
-        </span>
-        {label != null || content != null ? <span className='mcheck-label'>{label != null ? label : content}</span> : null}
-      </label>
-    </div>
-  );
-};
-
-export default MdCheckbox;
+// md3 ADAPTER (not a verbatim legacy move): drop-in replacement for the deleted
+// fe-ui-core MUI `CheckboxMaterial` / `FormCheckboxMaterial` plain-props usage
+// (checked/onChange/label — NOT the mobx-field binding, which the md3 kit
+// `FormCheckbox` owns). Renders the same `.mcheck` markup as the kit. Extra
+// legacy props (labelPlacement, icon, …) 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 Icon from '../../ui/Icon';
+
+export interface MdCheckboxProps {
+  name?: string;
+  value?: any;
+  checked?: boolean;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  error?: boolean;
+  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any) => void;
+  className?: string;
+  // legacy CheckboxMaterial props, accepted for call-site compatibility and ignored:
+  containerClassName?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  tooltipDescription?: string;
+  tooltipPosX?: string;
+  aggregation?: number;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  icon?: any;
+  checkedIcon?: any;
+  type?: string;
+  content?: React.ReactNode;
+  radio?: boolean;
+  formControlClassName?: string;
+  contentType?: string;
+}
+
+const MdCheckbox: React.FunctionComponent<MdCheckboxProps> = ({
+  name, value, checked, disabled, label, error, onChange, className, content
+}) => {
+  const isChecked = !!checked;
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) onChange(event, event.target.checked, value);
+  };
+
+  return (
+    <div className={classnames('mcheck-group', className, { 'mcheck-group--error': !!error })}>
+      <label className={'mcheck' + (disabled ? ' mcheck--disabled' : '')}>
+        <input
+          type='checkbox'
+          className='mcheck-input'
+          name={name}
+          checked={isChecked}
+          disabled={disabled}
+          aria-checked={isChecked}
+          aria-invalid={!!error || undefined}
+          onChange={handleChange}
+        />
+        <span className='mcheck-box' aria-hidden='true'>
+          {isChecked ? <Icon name='check' size={16} stroke={3} cls='mcheck-tick' /> : null}
+        </span>
+        {label != null || content != null ? <span className='mcheck-label'>{label != null ? label : content}</span> : null}
+      </label>
+    </div>
+  );
+};
+
+export default MdCheckbox;