@dvrd/dvr-controls 1.0.53 → 1.0.54

package/src/js/pdf/element/pdfElement.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfElement.scss';
 

package/src/js/pdf/element/style/pdfElement.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../style/variables';

package/src/js/pdf/history/pdfHistory.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 import {PDFElementParams, PdfFont} from "../../util/interfaces";

package/src/js/pdf/image/pdfImage.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfImage.scss';
 

package/src/js/pdf/image/style/pdfImage.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../style/variables';

package/src/js/pdf/invoiceTable/pdfInvoiceTable.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfInvoiceTable.scss';
 

package/src/js/pdf/invoiceTable/style/pdfInvoiceTable.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../style/variables';

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfTemplateCreator.scss';
 

package/src/js/pdf/settings/buttons/iconButton.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/iconButton.scss';
 

package/src/js/pdf/settings/buttons/style/iconButton.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../../style/variables';

package/src/js/pdf/settings/image/pdfImageSettings.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfImageSettings.scss';
 

package/src/js/pdf/settings/image/style/pdfImageSettings.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../../style/variables';

package/src/js/pdf/settings/invoiceTable/pdfInvoiceTableSettings.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfInvoiceTableSettings.scss';
 

package/src/js/pdf/settings/invoiceTable/style/pdfInvoiceTableSettings.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../../style/variables';

package/src/js/pdf/settings/pdfElementSettings.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfElementSettings.scss';
 

package/src/js/pdf/settings/style/pdfElementSettings.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../style/variables';

package/src/js/pdf/settings/text/pdfTextSettings.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfTextSettings.scss';
 

package/src/js/pdf/settings/text/style/pdfTextSettings.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../../style/variables';

package/src/js/pdf/style/pdfTemplateCreator.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../style/variables';

package/src/js/pdf/text/pdfText.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/pdfText.scss';
 

package/src/js/pdf/text/style/pdfText.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../style/variables';

package/src/js/pdf/v2/pdfElement/pdfDraggableElement.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) Dave van Rijn Development 2022.
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 import React, {

package/src/js/pdf/v2/types/pdfTemplateTypes.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) Dave van Rijn Development 2022.
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 import {Position} from "react-rnd";

package/src/js/popup/style/withBackground.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../style/variables';

package/src/js/popup/withBackground.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 import './style/withBackground.scss';

package/src/js/radio/dvrdRadio.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) Dave van Rijn Development 2023.
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/dvrdRadio.scss';
 

package/src/js/radio/dvrdRadioController.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) Dave van Rijn Development 2023.
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 import React, {useCallback, useContext, useRef, useState} from 'react';

package/src/js/radio/style/dvrdRadio.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) Dave van Rijn Development 2023.
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../style/variables';

package/src/js/select/async/asyncSelect.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/asyncSelect.scss';
 

package/src/js/select/async/style/asyncSelect.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 @import '../../../../style/variables';

package/src/js/select/dvrdGroupedSelect.tsx

@@ -0,0 +1,220 @@
+/*
+ * Copyright (c) 2024. Dave van Rijn Development
+ */
+
+import './style/dvrdGroupedSelect.scss';
+import React, {ForwardedRef, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {ErrorType, GroupedSelectItem, SelectValueType} from "../util/interfaces";
+import classNames from 'classnames';
+import AwesomeIcon from "../icon/awesomeIcon";
+import defer from 'lodash.defer';
+
+
+interface Props {
+    onChange: (value: SelectValueType, evt: React.MouseEvent) => void;
+    items: Array<GroupedSelectItem>;
+    value: SelectValueType;
+    label?: string;
+    disabled?: boolean;
+    error?: ErrorType;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    itemContainerClassName?: string;
+    itemClassName?: string;
+    errorClassName?: string;
+    itemsPosition?: 'top' | 'bottom';
+    maxItemsHeight?: number | string;
+    highlightSelected?: true;
+    placeholder?: string;
+}
+
+export type GroupedSelectRef = { open: VoidFunction; close: VoidFunction; }
+
+function findInItems(items: Array<GroupedSelectItem>, value: string | number): GroupedSelectItem | null {
+    for (const item of items) {
+        if (item.value === value) return item;
+        if (item.children) {
+            const childItem = findInItems(item.children, value);
+            if (childItem) return childItem;
+        }
+    }
+    return null;
+}
+
+function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
+    const {
+        className, label, labelClassName, value, placeholder, valueClassName, error, itemContainerClassName,
+        onChange, items, itemClassName, disabled, errorClassName, highlightSelected
+    } = props;
+    const [open, setOpen] = useState(false);
+    const maxItemsHeight: string | undefined = useMemo(() => {
+        const {maxItemsHeight} = props;
+        if (maxItemsHeight) {
+            if (typeof maxItemsHeight === 'string') return maxItemsHeight;
+            return maxItemsHeight + 'px';
+        }
+        return undefined;
+    }, [props.maxItemsHeight]);
+    const itemsPosition = useMemo(() => {
+        return props.itemsPosition ?? 'bottom';
+    }, [props.itemsPosition]);
+    const selectedLabel: string | number | React.ReactElement | null = useMemo(() => {
+        const selectedItem = findInItems(items, value);
+        if (!selectedItem) return null;
+        return selectedItem.valueLabel ?? selectedItem.label ?? '';
+    }, [value, items]);
+    const itemsContainer = useRef<HTMLDivElement>(null);
+
+    function onSelectItem(item: GroupedSelectItem) {
+        return function (evt: React.MouseEvent) {
+            evt.stopPropagation();
+            if (item.value !== undefined) {
+                if (item.value !== value)
+                    onChange(item.value, evt);
+                onToggleOpen(false);
+            }
+        }
+    }
+
+    function onToggleOpen(forcedValue?: boolean) {
+        if (disabled) forcedValue = false;
+        setOpen(forcedValue ?? !open);
+    }
+
+    function onClickRoot(evt: React.MouseEvent) {
+        evt.stopPropagation();
+        onToggleOpen();
+    }
+
+    function onOpen() {
+        onToggleOpen(true);
+    }
+
+    function onClose() {
+        onToggleOpen(false);
+    }
+
+    function clickListener() {
+        setOpen(false);
+    }
+
+    function scrollSelectedInView() {
+        itemsContainer.current?.scrollTo({top: 0});
+        if (!highlightSelected || selectedLabel === null) return;
+        const selectedItem = findInItems(items, value);
+        if (!selectedItem || !selectedItem.value) return;
+        const itemID = `dvrd-grouped-item-${selectedItem.value}`;
+        const element = document.getElementById(itemID);
+        if (!element) return;
+        element.scrollIntoView({behavior: 'smooth'});
+    }
+
+    function renderLabel() {
+        if (!label) return null;
+        return <label className={classNames('grouped-select-label', labelClassName)}>{label}</label>;
+    }
+
+    function renderValue() {
+        const hasValue = selectedLabel !== null;
+        const canRender = hasValue && !['string', 'number'].includes(typeof selectedLabel)
+        const chevIcon = itemsPosition === 'bottom' ? 'chevron-down' : 'chevron-up';
+        const placeholderHidden = !placeholder?.length;
+        return (
+            <div className={classNames('grouped-select-value-container', valueClassName)}>
+                {hasValue ?
+                    canRender ? renderCustomValue(selectedLabel as React.ReactElement) :
+                        <label className='grouped-select-value'>{selectedLabel}</label> :
+                    <label className={classNames('grouped-select-placeholder', placeholderHidden && 'hidden')}>
+                        {placeholderHidden ? 'placeholder' : placeholder}</label>
+                }
+                <AwesomeIcon name={chevIcon} className='chev-icon'/>
+            </div>
+        );
+    }
+
+    function renderCustomValue(value: React.ReactElement) {
+        return React.cloneElement(value, {
+            ...value.props,
+            className: classNames(value.props?.className, 'grouped-select-value')
+        });
+    }
+
+    function renderItemsContainer() {
+        return (
+            <div className={classNames('grouped-select-items', itemContainerClassName)}
+                 style={{maxHeight: maxItemsHeight}} ref={itemsContainer}>
+                {items.map(renderItem())}
+            </div>
+        )
+    }
+
+    function renderItem(layer: number = 0) {
+        return function (item: GroupedSelectItem, index: number) {
+            if (item.selectable !== undefined) return null;
+            const isGroupHead = !!item.children?.length;
+            const isElement = !['string', 'number'].includes(typeof item.label);
+            const padding = `${layer + .5}rem`;
+            const isSelectable = item.value !== undefined;
+            const isSelected = item.value === value;
+            return (
+                <div id={`dvrd-grouped-item-${item.value}`} key={index}
+                     className={classNames('dvrd-grouped-item', itemClassName)}
+                     onClick={onSelectItem(item)}>
+                    {isElement ? renderCustomLabel(item.label as React.ReactElement, padding, isGroupHead, isSelectable) :
+                        <label className={classNames('grouped-item-label', isGroupHead && 'group-head',
+                            isSelectable && 'selectable', (isSelected && highlightSelected) && 'selected')}
+                               style={{paddingLeft: padding}}>{item.label}</label>}
+                    {!!item.children && (
+                        <div className='dvrd-grouped-item-children'>
+                            {item.children.map(renderItem(layer + 1))}
+                        </div>
+                    )}
+                </div>
+            )
+        }
+    }
+
+    function renderCustomLabel(label: React.ReactElement, padding: string, isGroupHead: boolean, isSelectable: boolean) {
+        const style = label.props?.style ?? {};
+        return React.cloneElement(label, {
+            ...label.props,
+            style: {...style, paddingLeft: padding},
+            className: classNames('grouped-item-label', isGroupHead && 'group-head', isSelectable && 'selectable',
+                label.props?.className)
+        });
+    }
+
+    function renderError() {
+        if (!error) return null;
+        return (
+            <label className={classNames('dvrd-grouped-select-error', errorClassName)}>{error}</label>
+        );
+    }
+
+    useEffect(() => {
+        if (open) {
+            document.body.addEventListener('click', clickListener);
+            defer(scrollSelectedInView);
+        } else document.body.removeEventListener('click', clickListener);
+    }, [open]);
+
+    useImperativeHandle(ref, () => ({
+        open: onOpen, close: onClose
+    }));
+
+    return (
+        <div className={classNames('dvrd-grouped-select', !!error && 'error', disabled && 'disabled', itemsPosition,
+            (open && !disabled) && 'open', className)}
+             onClick={onClickRoot}>
+            {renderLabel()}
+            <div className='dvrd-grouped-select-content'>
+                {renderValue()}
+                {renderItemsContainer()}
+            </div>
+            {renderError()}
+        </div>
+    )
+}
+
+export default forwardRef<GroupedSelectRef, Props>(DVRDGroupedSelect);

package/src/js/select/dvrdSelect.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 import './style/dvrdSelect.scss';
 

package/src/js/select/dvrdSelectController.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 import React, {useEffect, useMemo, useState} from 'react';

package/src/js/select/select.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 import './style/select.scss';

package/src/js/select/selectController.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021. Dave van Rijn Development
+ * Copyright (c) 2024. Dave van Rijn Development
  */
 
 import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler} from 'react';

package/src/js/select/style/dvrdGroupedSelect.scss

@@ -0,0 +1,176 @@
+/*!
+ * Copyright (c) 2024. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvrd-grouped-select {
+  display: grid;
+  grid-row-gap: .25rem;
+  position: relative;
+
+  .grouped-select-label {
+    color: $color-blue-text;
+    font-size: .9rem;
+    transition: color .2s ease-in-out;
+    cursor: pointer;
+    user-select: none;
+    margin-left: 1px;
+  }
+
+  .dvrd-grouped-select-content {
+    position: relative;
+
+    .grouped-select-value-container {
+      border: 1px solid #D9D9D9;
+      border-radius: 4px;
+      transition: border-color .2s ease-in-out, border-radius .2s ease-in-out;
+      display: grid;
+      grid-template-columns: 1fr fit-content(100%);
+      grid-column-gap: .5rem;
+      align-items: center;
+      padding: .75rem;
+      cursor: pointer;
+      background-color: white;
+
+      .grouped-select-placeholder, .grouped-select-value {
+        font-family: avenir-light, sans-serif;
+        user-select: none;
+        vertical-align: middle;
+      }
+
+      .grouped-select-placeholder {
+        color: $color-gray-2;
+
+        &.hidden {
+          visibility: hidden;
+        }
+      }
+
+      .grouped-select-value {
+        color: $color-blue-text;
+      }
+
+      .chev-icon {
+        font-size: .9rem;
+        transition: transform .2s ease-in-out;
+        color: $color-gray-3;
+      }
+    }
+
+    .grouped-select-items {
+      @include backgroundShadow3($borderRadius: 0);
+      background-color: white;
+      position: absolute;
+      left: 1px;
+      width: calc(100% - 2px);
+      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+      visibility: hidden;
+      opacity: 0;
+      z-index: 1;
+      overflow-y: auto;
+
+      .dvrd-grouped-item {
+        .grouped-item-label {
+          padding: .5rem;
+          display: block;
+          transition: background-color .2s ease-in-out;
+          cursor: default;
+          user-select: none;
+          color: $color-blue-text;
+
+          &.selectable {
+            cursor: pointer;
+
+            &:not(&.selected):hover {
+              background-color: rgba($color-blue-1, .2);
+            }
+          }
+
+          &.selected {
+            background-color: rgba($color-blue-1, .3);
+          }
+
+          &.group-head {
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+
+  .dvrd-grouped-select-error {
+    color: red;
+    font-size: .9rem;
+    margin-left: 1px;
+  }
+
+  &.bottom {
+    .grouped-select-items {
+      bottom: 0;
+      transform: translateY(100%);
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+  }
+
+  &.top {
+    .grouped-select-items {
+      top: 0;
+      transform: translateY(calc(-100%));
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+  }
+
+  &.open, &:hover:not(&.disabled):not(&.error) {
+    .grouped-select-value-container {
+      border-color: $color-blue-1;
+    }
+  }
+
+  &.open {
+    .grouped-select-label {
+      color: $color-blue-1;
+    }
+
+    .grouped-select-value-container .chev-icon {
+      transform: rotateX(180deg);
+    }
+
+    .grouped-select-items {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    &.bottom {
+      .grouped-select-value-container {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &.top {
+      .grouped-select-value-container {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  &.error {
+    .grouped-select-label {
+      color: red;
+    }
+
+    .grouped-select-value-container {
+      border-color: red;
+    }
+  }
+
+  &.disabled {
+    &, * {
+      cursor: default;
+    }
+  }
+}