Merge tag 'v23.8.0' into develop

tag final release v23.8.0

Author: haschek

CHANGELOG.md

@@ -6,23 +6,31 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+## [23.8.0] - 2024-08-19
+
 ### Added
 
 -   `<ApplicationContainer />`:
-    -   monitor application wide dropzones for dragged elements via data attributes attached to body element containing the data transfer type of drag over events.
+    -   `monitorDropzonesFor` property can be used to monitor application wide dropzones for dragged elements via data attributes attached to body element containing the data transfer type of drag over events.
 -   `<ReactFlow />`
     -   `dropzoneFor` property can be used to mark react flow canvas as matching area to drop dragged elements.
 -   `<Accordion />`, `<AccordionItem />`
     -   `whitespaceSize` property to define how much whitespace is used on top and bottom inside the header and content of an accordion item.
     -   `separationSize` property defines how much space is used for the separation between an accordion item and the next one.
+-   class name prefixes are now available by variables with more readable names:
+    -   BlueprintJS: `$prefix-blueprintjs` (current value is `bp5`)
+    -   Carbon Design System: `$prefix-carbon` (current value is `cds`)
+    -   eccenca GUI elements: `$prefix-eccgui` (current value is `eccgui`)
 
 ### Fixed
 
--   `<TextArea />`
-    -   improve visual alignment to `TextField` regarding whitespace and colors
+-   `<ElapsedDateTimeDisplay />`
+    -   negative values are not shown (e.g. in case server and browser clocks are apart)
 
 ### Changed
 
+-   `<TextArea />`
+    -   improve visual alignment to `TextField` regarding whitespace and colors
 -   basic styles for Uppy widget were improved and moved to its own component folder
 
 ### Deprecated

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.7.0",
+    "version": "23.8.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -166,7 +166,10 @@
         "**/word-wrap": "^1.2.4",
         "**/webpack-dev-middleware": "^6.1.2",
         "**/braces": "^3.0.3",
-        "**/ws": "^8.17.1"
+        "**/ws": "^8.17.1",
+        "**/ejs": "^3.1.10",
+        "**/tar": "^6.2.1",
+        "**/express": "^4.19.2"
     },
     "husky": {
         "hooks": {

src/cmem/react-flow/_canvas.scss

@@ -1,11 +1,11 @@
 .eccgui-graphviz__canvas--draghover {
     body[data-monitor-dropzone~="application/reactflow"] &[data-dropzone-for~="application/reactflow"],
     body[data-monitor-dropzone~="Files"] &[data-dropzone-for~="Files"] {
-        background-color: rgba($eccgui-color-accent, $eccgui-opacity-disabled);
+        background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
         box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
 
         & > * {
-            opacity: $eccgui-opacity-muted;
+            opacity: $eccgui-opacity-narrow;
         }
 
         .react-flow__node {

src/components/Accordion/Stories/Accordion.stories.tsx

@@ -28,7 +28,7 @@ const TemplateIcons: StoryFn<typeof Accordion> = (args) => <Accordion {...args}
 export const Default = TemplateIcons.bind({});
 Default.args = {
     children: [
-        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" fullWidth />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 2 (elevated)" elevated />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 3 (initially opened)" open />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 4 (disabled)" disabled />,

src/components/Accordion/accordion.scss

@@ -152,7 +152,9 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
     }
 
     .#{$eccgui}-accordion__item--condensed:not(.#{$eccgui}-accordion__item--fullwidth) &,
-    .#{$prefix}--accordion--start.#{$eccgui}-accordion__container--global-contentspace-none &,
+    .#{$prefix}--accordion--start.#{$eccgui}-accordion__container--global-contentspace-none
+        :not(.#{$eccgui}-accordion__item--fullwidth)
+        &,
     .#{$prefix}--accordion--start
         .#{$eccgui}-accordion__item--contentspace-none:not(.#{$eccgui}-accordion__item--fullwidth)
         & {

src/components/Application/ApplicationContainer.tsx

@@ -5,11 +5,22 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { useDropzoneMonitor } from "./helper";
 
-export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If set then the `element` is extended automatically by a `monitor-dropzone` data attribute.
+     * This need to match with a `dropzone-for` data attribute on available dropzones for dragged elements.
+     */
+    monitorDropzonesFor?: string[];
+}
 
-export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
+export const ApplicationContainer = ({
+    children,
+    className = "",
+    monitorDropzonesFor = [],
+    ...otherDivProps
+}: ApplicationContainerProps) => {
     const containerRef = React.useRef<any>(null);
-    useDropzoneMonitor();
+    useDropzoneMonitor(monitorDropzonesFor);
 
     return (
         <OverlaysProvider>

src/components/Application/_dropzone.scss

@@ -22,7 +22,7 @@ body[data-monitor-dropzone~="Files"] .uppy-DragDrop--isDragDropSupported {
 
     & > * {
         pointer-events: all;
-        opacity: $eccgui-opacity-narrow;
+        opacity: $eccgui-opacity-regular;
     }
 }
 

src/components/Application/helper.ts

@@ -25,14 +25,15 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
  * Sets different data attributes to the body element.
  * They can be used to apply styling rules.
  */
-export const useDropzoneMonitor = () => {
+export const useDropzoneMonitor = (enabledTypes: string[]) => {
     React.useEffect(() => {
         const monitor = window.document.body;
 
         const addMonitor = (event: DragEvent) => {
             const types = event.dataTransfer?.types || [];
-            if (types.length > 0 && !monitor.dataset.monitorDropzone) {
-                monitor.dataset.monitorDropzone = types.join(" ");
+            const monitorTypes = [...new Set(types.filter((type) => enabledTypes.includes(type)))];
+            if (monitorTypes.length > 0 && !monitor.dataset.monitorDropzone) {
+                monitor.dataset.monitorDropzone = monitorTypes.join(" ");
             }
             event.preventDefault();
         };

src/configuration/_variables.scss

@@ -72,6 +72,7 @@ $eccgui-opacity-regular: 1 !default;
 $eccgui-opacity-narrow: 0.8 !default;
 $eccgui-opacity-muted: 0.61 !default;
 $eccgui-opacity-disabled: 0.39 !default;
+$eccgui-opacity-ghostly: 0.2 !default;
 $eccgui-opacity-invisible: 0 !default;
 
 // -- Configuration stack of z-indexes -----------------------------------------

src/extensions/uppy/_fileupload.scss

@@ -36,12 +36,12 @@ $eccgui-color-fileupload-text: inherit;
 }
 
 .uppy-DragDrop--isDraggingOver.uppy-DragDrop--isDragDropSupported {
-    background-color: rgba($eccgui-color-accent, $eccgui-opacity-disabled);
+    background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
     box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
 
     & > * {
         color: $eccgui-color-accent-contrast;
-        opacity: $eccgui-opacity-muted;
+        opacity: $eccgui-opacity-narrow;
         fill: currentcolor;
     }
 }