@gisce/react-ooui 1.2.0-rc.79 → 1.2.0-rc.81

package/src/stories/Char.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Char } from "..";
 import { Char as CharOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/FiberGrid.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { FiberGrid } from "../widgets/custom/FiberGrid";
 import { Char as CharOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 import { Form } from "antd";
 

package/src/stories/Float.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Float } from "..";
 import { Float as FloatOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/FloatTime.stories.tsx

@@ -2,7 +2,10 @@ import React, { useState } from "react";
 
 import { FloatTimeInput } from "../widgets/base/FloatTime";
 import { Float as FloatOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Image.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Image } from "..";
 import { Image as ImageOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Integer.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Integer } from "..";
 import { Integer as IntegerOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Label.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Label } from "..";
 import { Label as LabelOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Many2one.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Many2one } from "..";
 import { Many2one as Many2oneOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/One2many.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { One2many } from "..";
 import { One2many as One2manyOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/ProgressBar.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { ProgressBarInput } from "../widgets/base/ProgressBar";
 import { Float as FloatOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Reference.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { ReferenceInput } from "../widgets/base/Reference";
 import { Reference as ReferenceOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Selection.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { SelectionInput } from "../widgets/base/Selection";
 import { Selection as SelectionOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 import { withKnobs, text } from "@storybook/addon-knobs";

package/src/stories/Separator.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Separator } from "..";
 import { Separator as SeparatorOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Text.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Text } from "..";
 import { Text as TextOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/containers/Group.stories.tsx

@@ -1,5 +1,8 @@
 import React from "react";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 
 import { withKnobs, number, text } from "@storybook/addon-knobs";

package/src/stories/containers/NewLine.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 
 import { Form } from "../..";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 import LocaleProvider from "../../context/LocaleContext";
 

package/src/stories/containers/Notebook.stories.tsx

@@ -1,5 +1,8 @@
 import React from "react";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 
 import { withKnobs } from "@storybook/addon-knobs";

package/src/stories/custom/ButtonGroup.stories.tsx

@@ -4,7 +4,10 @@ import { Dropdown, Menu } from 'antd';
 import { DownOutlined, UserOutlined } from '@ant-design/icons';
 import { ButtonGroup as ButtonGroupOoui, Button as ButtonOoui } from "@gisce/ooui";
 import { ButtonGroup } from "../../widgets/custom/ButtonGroup";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/CodeEditor.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { CodeEditor } from "../../widgets/custom/CodeEditor";
 import { CodeEditor as CodeEditorOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Indicator.stories.tsx

@@ -2,7 +2,10 @@ import React, {useState} from "react";
 
 import {Indicator} from "../../widgets/custom/Indicator";
 import { Indicator as IndicatorOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Markdown.stories.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { Markdown as MarkdownOOui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 import { MarkdownInput } from "../../widgets/custom/Markdown";
 

package/src/stories/custom/MultiCheckbox.stories.tsx

@@ -3,7 +3,10 @@ import React from "react";
 import { MultiCheckboxInput } from "../../widgets/custom/MultiCheckbox";
 import { Checkbox, Space, Row, Col } from "antd";
 import { MultiCheckbox as MultiCheckboxOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Radio.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Radio } from "../../widgets/custom/Radio";
 import { Radio as RadioOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Steps.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Steps, StepsInput } from "../../widgets/custom/Steps";
 import { Steps as StepsOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Switch.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Switch } from "../../widgets/custom/Switch";
 import { Switch as SwitchOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Tag.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 
 import { Tag as TagOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 import { TagInput } from "../../widgets/custom/Tag";
 

package/src/stories/custom/Tags.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { TagsInput, Tags } from "../../widgets/custom/Tags";
 import { Tags as TagsOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/forms/PreferencesForm.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 
 import { Form } from "../..";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 import LocaleProvider from "../../context/LocaleContext";
 

package/src/stories/ui/ActionBar.stories.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import { ActionBar } from "../..";
 import LocaleProvider from "../../context/LocaleContext";
 
-import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
+
 
 export default {
   title: "Components/Widgets/UI/ActionBar",

package/src/stories/ui/FavouriteButton.stories.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import FavouriteButton from "../../ui/FavouriteButton";
 import LocaleProvider from "../../context/LocaleContext";
 
-import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
+
 
 export default {
   title: "Components/Widgets/UI/FavouriteButton",

package/src/stories/ui/GoToResourceModal.stories.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import { GoToResourceModal } from "../../ui/GoToResourceModal";
 import LocaleProvider from "../../context/LocaleContext";
 
-import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
+
 
 export default {
   title: "Components/Widgets/UI/GoToResourceModal",

package/src/stories/views/SearchTree.stories.tsx

@@ -3,7 +3,9 @@ import React from "react";
 import SearchTree from "../../widgets/views/SearchTree";
 import ConnectionProvider from "../../ConnectionProvider";
 
-import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/views/Tab.stories.tsx

@@ -2,7 +2,9 @@ import React from "react";
 
 import Tab from "../../views/tabs/Tab";
 
-import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/views/TabsAndContent.stories.tsx

@@ -2,7 +2,9 @@ import React from "react";
 
 import Tab from "../../views/tabs/Tab";
 
-import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/views/Tree.stories.jsx

@@ -1,7 +1,10 @@
 import React from "react";
 
 import { Tree } from "../..";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 import LocaleProvider from "../../context/LocaleContext";
 

package/src/stories/views/searchFilter/DateRangePicker.stories.tsx

@@ -4,7 +4,9 @@ import { Field as FieldOoui } from "@gisce/ooui";
 import LocaleProvider from "../../../context/LocaleContext";
 
 import { DateRangePicker } from "../../../widgets/views/searchFilter/DateRangePicker";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
 
 export default {
   title: "Components/Widgets/Views/SearchFilter/DateRangePicker",

package/src/stories/views/searchFilter/DateTimeRangePicker.stories.tsx

@@ -3,7 +3,10 @@ import React from "react";
 import { Field as FieldOoui } from "@gisce/ooui";
 
 import { DateTimeRangePicker } from "../../../widgets/views/searchFilter/DateTimeRangePicker";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../../context/LocaleContext";
 
 export default {

package/src/stories/views/searchFilter/PairFields.stories.tsx

@@ -3,7 +3,10 @@ import React from "react";
 import { Field as FieldOoui } from "@gisce/ooui";
 
 import { PairFields } from "../../../widgets/views/searchFilter/PairFields";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../../context/LocaleContext";
 
 export default {

package/src/stories/views/searchFilter/SearchFilter.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 
 import { SearchFilter } from "../../..";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 import LocaleProvider from "../../../context/LocaleContext";
 

package/src/stories/views/searchFilter/examples/PartnersSearchFilter.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 
 import { SearchFilter } from "../../../..";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 import LocaleProvider from "../../../../context/LocaleContext";
 

package/src/ui/FavouriteButton.tsx

@@ -7,7 +7,7 @@ import {
   FormOutlined,
   EditOutlined,
 } from "@ant-design/icons";
-import { Button, Col, Row, Spin, Tooltip } from "antd";
+import { Button, Col, Row, Spin, Tooltip, theme } from "antd";
 import { Menu, Dropdown } from "antd";
 import showErrorDialog from "@/ui/ActionErrorDialog";
 import {
@@ -16,6 +16,7 @@ import {
 } from "@/context/TabManagerContext";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import { ViewType } from "@/types";
+const { useToken } = theme;
 
 export type ShortcutApi = {
   action_id: number;
@@ -57,6 +58,8 @@ const FavouriteButton = (props: Props) => {
   const [currentShortcutId, setCurrentShortcutId] = useState<number>();
   const { t } = (useContext(LocaleContext) as LocaleContextType) || {};
 
+  const { token } = useToken();
+
   const tabManagerContext = useContext(
     TabManagerContext
   ) as TabManagerContextType;
@@ -155,7 +158,7 @@ const FavouriteButton = (props: Props) => {
         <div style={{ flexGrow: 1, paddingLeft: 10 }}>
           <Tooltip title={t?.("edit_favorites")}>
             <EditOutlined
-              style={{ color: "#1890FF", cursor: "pointer" }}
+              style={{ color: token.colorPrimary, cursor: "pointer" }}
               onClick={editFavourites}
             />
           </Tooltip>
@@ -240,16 +243,24 @@ const FavouriteButton = (props: Props) => {
             <StarOutlined />
           )
         }
-        style={{ width: 50 }}
+        style={{
+          width: 50,
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+        }}
         onClick={toggleFavourite}
       ></Button>
       <Dropdown
         overlay={menu}
         onVisibleChange={handleVisibleChange}
-        visible={dropdownVisible}
+        open={dropdownVisible}
       >
         <Button
-          style={{ width: 25 }}
+          style={{
+            width: 25,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+          }}
           icon={<DownOutlined style={{ fontSize: "0.5em" }} />}
           onClick={(e) => e.preventDefault()}
         ></Button>

package/src/ui/GoToResourceModal.tsx

@@ -20,10 +20,10 @@ export const GoToResourceModal = (props: Props) => {
   }
 
   return (
-    <Modal
+    (<Modal
       title={t("goToResourceId")}
       centered
-      visible={visible}
+      open={visible}
       footer={null}
       destroyOnClose
       onCancel={onCancel}
@@ -67,6 +67,6 @@ export const GoToResourceModal = (props: Props) => {
           </Col>
         </Row>
       </Form>
-    </Modal>
+    </Modal>)
   );
 };

package/src/ui/TitleHeader.tsx

@@ -1,10 +1,13 @@
 import React, { useContext } from "react";
-import { Row, Col, Typography } from "antd";
+import { Row, Col, Typography, theme } from "antd";
 import {
   ActionViewContext,
   ActionViewContextType,
 } from "@/context/ActionViewContext";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { CopyOutlined } from "@ant-design/icons";
+
+const { useToken } = theme;
 
 const { Title, Text } = Typography;
 
@@ -25,6 +28,7 @@ function TitleHeader(props: Props) {
     selectedRowItems,
   } = useContext(ActionViewContext) as ActionViewContextType;
   const { t } = useContext(LocaleContext) as LocaleContextType;
+  const { token } = useToken();
 
   function getSummary() {
     if (currentView?.type === "form") {
@@ -35,7 +39,13 @@ function TitleHeader(props: Props) {
       if (totalItems === 0) {
         return (
           <>
-            {t("editingDocument")} (id: <Text copyable>{currentId}</Text>)
+            {t("editingDocument")} (id:{" "}
+            <Text
+              copyable={{ icon: <CopyOutlined style={{ color: "red" }} /> }}
+            >
+              {currentId}
+            </Text>
+            )
           </>
         );
       }
@@ -74,8 +84,12 @@ function TitleHeader(props: Props) {
   return (
     <div style={{ position: "sticky", top: 80, zIndex: 3 }}>
       <Row
-        className="rounded shadow-md bg-blueGray-100"
-        style={{ padding: "1em" }}
+        className="shadow-md"
+        style={{
+          padding: "1em",
+          borderRadius: token.borderRadius,
+          backgroundColor: token.colorPrimaryBg,
+        }}
         align="middle"
       >
         <Col flex={2}>