@neo4j-ndl/react 2.1.1 → 2.3.0

package/lib/types/layout/Flex.d.ts

@@ -0,0 +1,80 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { type ComponentPropsWithoutRef } from 'react';
+import { type CustomElementType, type Spacing, type Radius } from './types';
+type AllowedFlexElements = 'div' | 'span' | 'ul' | 'ol' | 'li';
+type BaseFlexProps<T extends CustomElementType> = {
+    /**
+     * The DOM element to render as the Flex,
+     * meaning the root node of the children collection.
+     * @default div
+     */
+    as?: AllowedFlexElements;
+    /**
+     * @default tokens.space['4']
+     */
+    gap?: Spacing;
+    /**
+     * @default undefined
+     */
+    rowGap?: Spacing;
+    /**
+     * @default undefined
+     */
+    columnGap?: Spacing;
+    /**
+     * @default undefined
+     */
+    borderRadius?: Radius;
+    /**
+     * Flex direction is set to column by default.
+     * The `row-reverse` and `column-reverse` values
+     * are skipped due to accessibility concerns.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#accessibility_concerns
+     *
+     * @default row
+     */
+    flexDirection?: Exclude<React.CSSProperties['flexDirection'], 'row-reverse' | 'column-reverse'>;
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
+     * @default nowrap
+     */
+    flexWrap?: React.CSSProperties['flexWrap'];
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+     * @default undefined
+     */
+    justifyContent?: React.CSSProperties['justifyContent'];
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+     * @default undefined
+     */
+    alignItems?: React.CSSProperties['alignItems'];
+    children?: React.ReactNode;
+};
+export type FlexProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as'> & BaseFlexProps<T>;
+type FlexComponent = <T extends CustomElementType>(props: FlexProps<T>) => React.ReactNode;
+/**
+ * Flex is a general-purpose container that helps
+ * lay out components with consistent spacing in a row or column.
+ */
+export declare const Flex: FlexComponent;
+export {};

package/lib/types/layout/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export * from './Flex';
+export * from './Box';

package/lib/types/layout/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+/// <reference types="react" />
+import { tokens } from '@neo4j-ndl/base';
+/**
+ * Currently supporting only native HTML elements.
+ * @todo Allow custom React components as well, like Typography.tsx does.
+ */
+export type CustomElementType = keyof HTMLElementTagNameMap;
+/**
+ * More info here:
+ * https://stackoverflow.com/questions/75085783/conditional-react-component-properties-with-multiple-generics#comment132505139_75086121
+ */
+export type ReactComponent = (args: any) => JSX.Element;
+export type Spacing = keyof typeof tokens.space;
+export declare const SpacingDefaults: {
+    readonly padding: "4";
+    readonly paddingBlockStart: undefined;
+    readonly paddingBlockEnd: undefined;
+    readonly paddingInline: undefined;
+    readonly paddingInlineStart: undefined;
+    readonly paddingInlineEnd: undefined;
+    readonly gap: "4";
+};
+export declare const getSpacing: (spacing: Spacing | undefined, property: keyof typeof SpacingDefaults) => string | undefined;
+export type Radius = keyof typeof tokens.borderRadius;
+export declare const RadiusDefaults: {
+    borderRadius: undefined;
+};
+export declare const getRadius: (spacing: Radius | undefined, property: keyof typeof RadiusDefaults) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -93,7 +93,7 @@
     "@floating-ui/react": "0.25.1",
     "@heroicons/react": "2.0.13",
     "@neo4j-cypher/react-codemirror": "^1.0.1",
-    "@neo4j-ndl/base": "^2.1.1",
+    "@neo4j-ndl/base": "^2.3.0",
     "@table-nav/core": "0.0.7",
     "@table-nav/react": "0.0.7",
     "@tanstack/react-table": "^8.9.3",