@bodynarf/react.components 1.7.4 → 1.7.5

package/src/components/dropdown/component/style.scss

@@ -1,120 +0,0 @@
-.bbr-dropdown {
-    min-width: 7.5rem;
-
-    &:not(.bbr-dropdown--compact) {
-        display: block;
-    }
-
-    &:not(.bbr-dropdown--compact) {
-        & .dropdown-menu {
-            min-width: 100%;
-        }
-    }
-
-    & .dropdown-menu {
-        & .dropdown-content {
-            overflow: auto;
-        }
-    }
-
-    &__label {
-        cursor: pointer;
-        user-select: none;
-        display: flex;
-        justify-content: flex-start;
-
-        span {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow-x: hidden;
-            max-width: 15rem;
-        }
-
-        &--default span {
-            color: gray;
-            font-style: italic;
-        }
-
-        .bbr-icon {
-            &:hover {
-                color: #0d6efd;
-            }
-
-            &.bi-arrow-down {
-                margin-left: auto;
-                &::before {
-                    transition: 0.25s ease-in-out transform;
-                }
-            }
-
-            &.bi-plus-lg::before {
-                transform: rotate(45deg);
-            }
-        }
-
-        &.is-success--md {
-            border-color: #48c78e;
-        }
-        &.is-danger--md {
-            border-color: #f14668;
-        }
-    }
-
-    &-item {
-        cursor: pointer;
-        user-select: none;
-        white-space: normal;
-
-        transition: 0.25s ease-in-out;
-        transition-property: color, background-color;
-
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.05);
-            color: #0a0a0a;
-        }
-        &:active {
-            background-color: rgba(0, 0, 0, 0.15);
-            color: #0a0a0a;
-        }
-
-        &.is-active {
-            background-color: #485fc7;
-            color: #fff;
-        }
-    }
-
-    &.is-active {
-        .bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
-            transform: rotate(180deg);
-        }
-    }
-
-    &--height-default {
-        .dropdown-menu .dropdown-content {
-            max-height: 15vw;
-        }
-    }
-
-    &--compact {
-        width: fit-content;
-
-        & .dropdown-menu {
-            min-width: 11.75rem;
-        }
-    }
-
-    &--disabled {
-        .bbr-dropdown__label {
-            background-color: hsl(0deg, 0%, 96%);
-            border-color: hsl(0deg, 0%, 96%);
-            box-shadow: none;
-            color: hsl(0deg, 0%, 48%);
-
-            cursor: not-allowed;
-
-            .bbr-icon {
-                pointer-events: none;
-            }
-        }
-    }
-}

package/src/components/dropdown/components/compact/index.tsx

@@ -1,121 +0,0 @@
-import { useCallback, useId, useState, MouseEvent } from "react";
-
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-
-import { useComponentOutsideClick } from "@bbr/hooks";
-
-import { DropdownProps } from "@bbr/components/dropdown";
-import DropdownItem from "@bbr/components/dropdown/components/item";
-import DropdownLabel from "@bbr/components/dropdown/components/label";
-
-const DropdownCompact = ({
-    items,
-    value, onSelect,
-    deselectable,
-    className, hideOnOuterClick, listMaxHeight,
-    placeholder, compact, disabled,
-}: DropdownProps): JSX.Element => {
-    const id = useId();
-
-    const [isListVisible, setListVisible] = useState<boolean>(false);
-
-    const onItemClick = useCallback(
-        (event: React.MouseEvent<HTMLLIElement>) => {
-            if (disabled ?? false) {
-                return;
-            }
-
-            const target = event.target as HTMLLIElement;
-
-            if (isNullOrUndefined(target)) {
-                return;
-            }
-
-            const dataValue = target.dataset["dropdownItemValue"];
-
-            if (isNullOrEmpty(dataValue)) {
-                return;
-            }
-
-            const item = items.find(x => x.value === dataValue);
-
-            if (isNullOrUndefined(item)) {
-                return;
-            }
-
-            if (value === item) {
-                setListVisible(false);
-                return;
-            }
-
-            onSelect(item);
-            setListVisible(false);
-        }, [setListVisible, value, items, onSelect, disabled]);
-
-    const onLabelClick = useCallback(
-        (event: MouseEvent<HTMLLabelElement>): void => {
-            if (disabled ?? false) {
-                return;
-            }
-
-            const target = event.target as HTMLElement;
-
-            if (isNullOrUndefined(target)) {
-                return;
-            }
-
-            if (target.classList.contains("bi-plus-lg")) {
-                onSelect(undefined);
-            } else {
-                setListVisible(state => !state);
-            }
-        }, [onSelect, setListVisible, disabled]);
-
-    useComponentOutsideClick(
-        `[data-dropdown-id="${id}"]`, isListVisible,
-        () => setListVisible(false),
-        hideOnOuterClick,
-    );
-
-    const classNames: string = getClassName([
-        "bbr-dropdown",
-        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
-        (compact ?? false) ? "bbr-dropdown--compact" : "",
-        isListVisible ? "is-active" : "",
-        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
-        className,
-        "dropdown"
-    ]);
-
-    return (
-        <div
-            key={id}
-            className={classNames}
-            data-dropdown-id={id}
-        >
-            <DropdownLabel
-                caption={placeholder}
-                deselectable={deselectable === true}
-                selectedItem={value}
-                onClick={onLabelClick}
-            />
-            <div className="dropdown-menu">
-                {items.length > 0
-                    ? <ul className="dropdown-content" style={{ maxHeight: listMaxHeight }}>
-                        {items.map(item =>
-                            <DropdownItem
-                                key={item.id}
-                                item={item}
-                                selected={value?.value === item.value}
-                                onClick={onItemClick}
-                            />
-                        )}
-                    </ul>
-                    : <span className="dropdown-content dropdown-item">No items found</span>
-                }
-            </div>
-        </div>
-    );
-};
-
-export default DropdownCompact;

package/src/components/dropdown/components/item/index.tsx

@@ -1,30 +0,0 @@
-import { SelectableItem } from "@bbr/components/dropdown";
-
-/** Dropdown item props */
-interface DropdownItemProps {
-    /** Item to present in dropdown */
-    item: SelectableItem;
-
-    /** Is item selected*/
-    selected: boolean;
-
-    /** Item click handler */
-    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
-}
-
-/** Single item in dropdown component */
-const DropdownItem = ({ item, selected, onClick }: DropdownItemProps): JSX.Element => {
-    return (
-        <li
-            key={item.id}
-            className={`bbr-dropdown-item dropdown-item${selected ? " is-active" : ""}`}
-            onClick={onClick}
-            data-dropdown-item-value={item.value}
-            title={item.displayValue}
-        >
-            {item.displayValue}
-        </li>
-    );
-};
-
-export default DropdownItem;

package/src/components/dropdown/components/label/index.tsx

@@ -1,68 +0,0 @@
-import { MouseEvent } from "react";
-
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-
-import { ElementSize } from "@bbr/components";
-import Icon from "@bbr/components/icon";
-
-import { SelectableItem } from "@bbr/components/dropdown";
-
-export interface DropdownLabelProps {
-    /** Caption when no items selected */
-    caption: string;
-
-    /** Can user deselect */
-    deselectable: boolean;
-
-    /** Selected item */
-    selectedItem?: SelectableItem;
-
-    /** Element classnames */
-    className?: string;
-
-    /** Click handler*/
-    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
-}
-
-/** Label component */
-const DropdownLabel = ({
-    caption,
-    selectedItem, onClick,
-    deselectable, className,
-}: DropdownLabelProps): JSX.Element => {
-    const itemSelected = !isNullOrUndefined(selectedItem);
-
-    const text = itemSelected
-        ? selectedItem?.displayValue
-        : caption;
-
-    const deselectVisible = deselectable && itemSelected;
-
-    const elClassName = getClassName([
-        "dropdown-trigger",
-        "bbr-dropdown__label",
-        isNullOrEmpty(className) ? "" : `${className}--md`,
-        itemSelected ? "" : "bbr-dropdown__label--default",
-        "button"
-    ]);
-
-    return (
-        <label
-            className={elClassName}
-            onClick={onClick}
-        >
-            {deselectVisible &&
-                <Icon name="plus-lg" size={ElementSize.Medium} />
-            }
-            <span
-                className={deselectVisible ? "mx-2" : "mr-2"}
-                title={itemSelected ? text : undefined}
-            >
-                {text}
-            </span>
-            <Icon name="arrow-down" size={ElementSize.Medium} />
-        </label>
-    );
-};
-
-export default DropdownLabel;

package/src/components/dropdown/components/withLabel/index.tsx

@@ -1,201 +0,0 @@
-import { MouseEvent, useCallback, useId, useState } from "react";
-
-import { isNullOrUndefined, isNullOrEmpty, getClassName } from "@bodynarf/utils";
-
-import { getValidationValues } from "@bbr/utils";
-import { useComponentOutsideClick } from "@bbr/hooks";
-
-import { DropdownProps } from "@bbr/components/dropdown";
-import DropdownItem from "@bbr/components/dropdown/components/item";
-import DropdownLabel from "@bbr/components/dropdown/components/label";
-
-const DropdownWithLabel = ({
-    items,
-    value, onSelect, validationState,
-    deselectable,
-    className, hideOnOuterClick, listMaxHeight,
-
-    label, placeholder, disabled
-}: DropdownProps): JSX.Element => {
-    const id = useId();
-
-    const [isListVisible, setListVisible] = useState<boolean>(false);
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
-
-    const onItemClick = useCallback(
-        (event: React.MouseEvent<HTMLLIElement>) => {
-            if (disabled ?? false) {
-                return;
-            }
-
-            const target = event.target as HTMLLIElement;
-
-            if (isNullOrUndefined(target)) {
-                return;
-            }
-
-            const dataValue = target.dataset["dropdownItemValue"];
-
-            if (isNullOrEmpty(dataValue)) {
-                return;
-            }
-
-            const item = items.find(x => x.value === dataValue);
-
-            if (isNullOrUndefined(item)) {
-                return;
-            }
-
-            if (value === item) {
-                setListVisible(false);
-                return;
-            }
-
-            onSelect(item);
-            setListVisible(false);
-        }, [setListVisible, value, items, onSelect, disabled]);
-
-    const onLabelClick = useCallback(
-        (event: MouseEvent<HTMLLabelElement>): void => {
-            if (disabled ?? false) {
-                return;
-            }
-
-            const target = event.target as HTMLElement;
-
-            if (isNullOrUndefined(target)) {
-                return;
-            }
-
-            if (target.classList.contains("bi-plus-lg")) {
-                onSelect(undefined);
-            } else {
-                setListVisible(state => !state);
-            }
-        }, [onSelect, setListVisible, disabled]);
-
-    useComponentOutsideClick(
-        `[data-dropdown-id="${id}"]`, isListVisible,
-        () => setListVisible(false),
-        hideOnOuterClick,
-    );
-
-    const classNames: string = getClassName([
-        "bbr-dropdown",
-        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
-        isListVisible ? "is-active" : "",
-        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
-        className,
-        "dropdown"
-    ]);
-
-    const labelClassName = getClassName([
-        "label",
-        label!.className
-    ]);
-
-    if (label!.horizontal) {
-        const labelContainerClassName = getClassName([
-            "field-label",
-            "is-normal",
-            label!.horizontalContainerClassName
-        ]);
-
-        const fieldContainerClassName = getClassName([
-            "field-body",
-            label!.horizontalFieldContainerClassName
-        ]);
-
-        return (
-            <div className="bbr-dropdown__root-container--with-label bbr-input field is-horizontal">
-                <div className={labelContainerClassName}>
-                    <label
-                        className={labelClassName}
-                        htmlFor={id}
-                    >
-                        {label!.caption}
-                    </label>
-                </div>
-                <div className={fieldContainerClassName}>
-                    <div className="field">
-                        <div
-                            key={id}
-                            className={classNames}
-                            data-dropdown-id={id}
-                        >
-                            <DropdownLabel
-                                className={styleClassName}
-                                caption={placeholder}
-                                deselectable={deselectable === true}
-                                selectedItem={value}
-                                onClick={onLabelClick}
-                            />
-                            <div className="dropdown-menu">
-                                {items.length > 0
-                                    ? <ul className="dropdown-content" style={{ maxHeight: listMaxHeight }}>
-                                        {items.map(item =>
-                                            <DropdownItem
-                                                key={item.id}
-                                                item={item}
-                                                selected={value?.value === item.value}
-                                                onClick={onItemClick}
-                                            />
-                                        )}
-                                    </ul>
-                                    : <span className="dropdown-content dropdown-item">No items found</span>
-                                }
-                            </div>
-                        </div>
-                        {isValidationDefined && validationMessages.length > 0 &&
-                            <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
-                        }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="field">
-            <label
-                className={labelClassName}
-                htmlFor={id}
-            >
-                {label!.caption}
-            </label>
-            <div
-                key={id}
-                className={classNames}
-                data-dropdown-id={id}
-            >
-                <DropdownLabel
-                    className={styleClassName}
-                    caption={placeholder}
-                    deselectable={deselectable === true}
-                    selectedItem={value}
-                    onClick={onLabelClick}
-                />
-                <div className="dropdown-menu">
-                    {items.length > 0
-                        ? <ul className="dropdown-content" style={{ maxHeight: listMaxHeight }}>
-                            {items.map(item =>
-                                <DropdownItem
-                                    key={item.id}
-                                    item={item}
-                                    selected={value?.value === item.value}
-                                    onClick={onItemClick}
-                                />
-                            )}
-                        </ul>
-                        : <span className="dropdown-content dropdown-item">No items found</span>
-                    }
-                </div>
-            </div>
-            {isValidationDefined && validationMessages.length > 0 &&
-                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
-            }
-        </div>
-    );
-};
-
-export default DropdownWithLabel;

package/src/components/dropdown/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./component";
-export * from "./types";

package/src/components/dropdown/types.ts

@@ -1,59 +0,0 @@
-import { BaseElementProps, InputLabel, ValidationState } from "@bbr/components";
-
-/** Dropdown item */
-export interface SelectableItem {
-    /** Unique item identifier */
-    id: string;
-
-    /** Item value */
-    value: string;
-
-    /** Displaying text */
-    displayValue: string;
-}
-
-/** Dropdown component props type */
-export interface DropdownProps extends BaseElementProps {
-    /** Items which can be selected */
-    items: Array<SelectableItem>;
-
-    /** Input element placeholder */
-    placeholder: string;
-
-    /**
-     * Action to update selected value, which stored outside
-    */
-    onSelect: (item?: SelectableItem) => void;
-
-    /**
-     * Selected value.
-     * Must be stored outside
-    */
-    value?: SelectableItem;
-
-    /** Hide dropdown list when its opened and user click outside */
-    hideOnOuterClick: boolean;
-
-    /** Can user deselect */
-    deselectable?: boolean;
-
-    /** Custom dropdown list max-height property */
-    listMaxHeight?: string;
-
-    /**
-     * Should dropdown be compact
-     * Will have width by maximum current selection item width
-     */
-    compact?: boolean;
-
-    /**
-     * Is element disabled
-     */
-    disabled?: boolean;
-
-    /** Label configuration */
-    label?: InputLabel;
-
-    /** Current validation state */
-    validationState?: ValidationState;
-}

package/src/components/icon/component/index.tsx

@@ -1,34 +0,0 @@
-import { getClassName } from "@bodynarf/utils";
-
-import "./style.scss";
-
-import { ElementSize } from "@bbr/components";
-
-import { IconProps } from "@bbr/components/icon";
-
-const sizeToClassMap: Map<ElementSize, string> = new Map([
-    [ElementSize.Small, "bbr-icon--size-small"],
-    [ElementSize.Normal, ""],
-    [ElementSize.Medium, "bbr-icon--size-medium"],
-    [ElementSize.Large, "bbr-icon--size-large"]
-]);
-
-/**
- * Icon component. Based on bootstrap icons
- */
-export default function Icon({
-    name, size = ElementSize.Normal,
-    className,
-}: IconProps): JSX.Element {
-    const classNames = getClassName([
-        "bbr-icon",
-        "bi",
-        `bi-${name}`,
-        sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
-        className
-    ]);
-
-    return (
-        <i className={classNames}></i>
-    );
-}

package/src/components/icon/component/style.scss

@@ -1,21 +0,0 @@
-.bbr-icon {
-    transition: 0.15s ease-in-out color;
-    font-size: 1rem;
-
-    &--size-small {
-        font-size: 0.85rem;
-    }
-    &--size-medium {
-        font-size: 1.25rem;
-    }
-    &--size-large {
-        font-size: 2rem;
-    }
-
-    &--right {
-        margin-left: 0.5rem;
-    }
-    &--left {
-        margin-right: 0.5rem;
-    }
-}

package/src/components/icon/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./component";
-export * from "./types";

package/src/components/icon/types.ts

@@ -1,18 +0,0 @@
-import { ElementSize } from "@bbr/components";
-
-/** Icon component props */
-export interface IconProps {
-    /**
-     * Icon name. Must be without `bi-`
-     * @example ["Arrow repeat", "arrow-repeat"]
-     * // Icon name to icon class name.
-     * // For class name check bootstrap icons website
-    */
-    name: string;
-
-    /** Additional classname */
-    className?: string;
-
-    /** Icon size */
-    size?: ElementSize;
-}

package/src/components/index.ts

@@ -1,13 +0,0 @@
-export * from "./accordion";
-export * from "./anchor";
-export * from "./button";
-export * from "./dropdown";
-export * from "./icon";
-export * from "./paginator";
-export * from "./search";
-export * from "./tabs";
-export * from "./tag";
-
-export * from "./primitives";
-
-export * from "./types";