@scm-manager/ui-components 2.29.1-20220012-084149 → 2.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.29.1-20220012-084149",
+  "version": "2.29.1",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.29.1-20220012-084149",
+    "@scm-manager/ui-tests": "^2.29.1",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -65,9 +65,9 @@
     "worker-plugin": "^3.2.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "^2.29.1-20220012-084149",
-    "@scm-manager/ui-extensions": "^2.29.1-20220012-084149",
-    "@scm-manager/ui-types": "^2.29.1-20220012-084149",
+    "@scm-manager/ui-api": "^2.29.1",
+    "@scm-manager/ui-extensions": "^2.29.1",
+    "@scm-manager/ui-types": "^2.29.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Autocomplete.tsx

@@ -37,11 +37,8 @@ type Props = {
   placeholder: string;
   loadingMessage: string;
   noOptionsMessage: string;
-  errorMessage?: string;
-  informationMessage?: string;
   creatable?: boolean;
   className?: string;
-  disabled?: boolean;
 };
 
 type State = {};
@@ -81,51 +78,52 @@ class Autocomplete extends React.Component<Props, State> {
       loadingMessage,
       noOptionsMessage,
       loadSuggestions,
-      errorMessage,
-      informationMessage,
       creatable,
-      className,
-      disabled
+      className
     } = this.props;
 
-    const asyncProps = {
-      className: "autocomplete-entry",
-      classNamePrefix: "autocomplete-entry",
-      cacheOptions: true,
-      loadOptions: loadSuggestions,
-      onChange: this.handleInputChange,
-      value,
-      placeholder,
-      loadingMessage: () => loadingMessage,
-      noOptionsMessage: () => noOptionsMessage,
-      isDisabled: disabled,
-      "aria-label": helpText || label
-    };
-
     return (
       <div className={classNames("field", className)}>
         <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
           {creatable ? (
             <AsyncCreatable
-              {...asyncProps}
+              className="autocomplete-entry"
+              classNamePrefix="autocomplete-entry"
+              cacheOptions
+              loadOptions={loadSuggestions}
+              onChange={this.handleInputChange}
+              value={value}
+              placeholder={placeholder}
+              loadingMessage={() => loadingMessage}
+              noOptionsMessage={() => noOptionsMessage}
               isValidNewOption={this.isValidNewOption}
-              onCreateOption={newValue => {
+              onCreateOption={value => {
                 this.selectValue({
-                  label: newValue,
+                  label: value,
                   value: {
-                    id: newValue,
-                    displayName: newValue
+                    id: value,
+                    displayName: value
                   }
                 });
               }}
+              aria-label={helpText || label}
             />
           ) : (
-            <Async {...asyncProps} />
+            <Async
+              className="autocomplete-entry"
+              classNamePrefix="autocomplete-entry"
+              cacheOptions
+              loadOptions={loadSuggestions}
+              onChange={this.handleInputChange}
+              value={value}
+              placeholder={placeholder}
+              loadingMessage={() => loadingMessage}
+              noOptionsMessage={() => noOptionsMessage}
+              aria-label={helpText || label}
+            />
           )}
         </div>
-        {errorMessage ? <p className="help is-danger">{errorMessage}</p> : null}
-        {informationMessage ? <p className="help is-info">{informationMessage}</p> : null}
       </div>
     );
   }

package/src/__snapshots__/storyshots.test.ts.snap

@@ -19219,10 +19219,6 @@ exports[`Storyshots Modal/Modal With form elements 1`] = `null`;
 
 exports[`Storyshots Modal/Modal With long tooltips 1`] = `null`;
 
-exports[`Storyshots Modal/Modal With overflow 1`] = `null`;
-
-exports[`Storyshots Modal/Modal With overflow and footer 1`] = `null`;
-
 exports[`Storyshots Notification Closeable 1`] = `
 <div
   className="Notificationstories__Wrapper-sc-8fx7tr-0 gJPbVB"

package/src/modals/Modal.stories.tsx

@@ -32,8 +32,6 @@ import ExternalLink from "../navigation/ExternalLink";
 import { Radio, Textarea, InputField } from "../forms";
 import { ButtonGroup, Button } from "../buttons";
 import Notification from "../Notification";
-import { Autocomplete } from "../index";
-import { SelectValue } from "@scm-manager/ui-types";
 
 const TopAndBottomMargin = styled.div`
   margin: 0.75rem 0; // only for aesthetic reasons
@@ -53,9 +51,7 @@ const text = `Mind-paralyzing change needed improbability vortex machine sorts s
     ordinary mob.`;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const doNothing = () => {
-  // nothing to do
-};
+const doNothing = () => {};
 const withFormElementsBody = (
   <>
     <RadioList>
@@ -75,21 +71,8 @@ const withFormElementsFooter = (
   </ButtonGroup>
 );
 
-const loadSuggestions: (p: string) => Promise<SelectValue[]> = () =>
-  new Promise(resolve => {
-    setTimeout(() => {
-      resolve([
-        { value: { id: "trillian", displayName: "Tricia McMillan" }, label: "Tricia McMillan" },
-        { value: { id: "zaphod", displayName: "Zaphod Beeblebrox" }, label: "Zaphod Beeblebrox" },
-        { value: { id: "ford", displayName: "Ford Prefect" }, label: "Ford Prefect" },
-        { value: { id: "dent", displayName: "Arthur Dent" }, label: "Arthur Dent" },
-        { value: { id: "marvin", displayName: "Marvin" }, label: "Marvin the Paranoid Android " }
-      ]);
-    });
-  });
-
 storiesOf("Modal/Modal", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => (
     <NonCloseableModal>
       <p>{text}</p>
@@ -121,7 +104,7 @@ storiesOf("Modal/Modal", module)
           This story exists because we had a problem, that long tooltips causes a horizontal scrollbar on the modal.
         </Notification>
         <hr />
-        <p>The following elements will have a very long help text, which has triggered the scrollbar in the past.</p>
+        <p>The following elements will have a verly long help text, which has triggered the scrollbar in the past.</p>
         <hr />
         <TopAndBottomMargin>
           <Checkbox label="Checkbox" checked={true} helpText={text} />
@@ -228,47 +211,10 @@ storiesOf("Modal/Modal", module)
         </p>
       </div>
     </NonCloseableModal>
-  ))
-  .add("With overflow", () => {
-    return (
-      <NonCloseableModal overflowVisible={true}>
-        <h1 className="title">Please Select</h1>
-        <Autocomplete
-          valueSelected={() => {
-            // nothing to do
-          }}
-          loadSuggestions={loadSuggestions}
-        />
-      </NonCloseableModal>
-    );
-  })
-  .add("With overflow and footer", () => {
-    return (
-      <NonCloseableModal overflowVisible={true} footer={withFormElementsFooter}>
-        <h1 className="title">Please Select</h1>
-        <Autocomplete
-          valueSelected={() => {
-            // nothing to do
-          }}
-          loadSuggestions={loadSuggestions}
-        />
-      </NonCloseableModal>
-    );
-  });
-
-type NonCloseableModalProps = { overflowVisible?: boolean; footer?: any };
+  ));
 
-const NonCloseableModal: FC<NonCloseableModalProps> = ({ overflowVisible, footer, children }) => {
-  return (
-    <Modal
-      body={children}
-      closeFunction={doNothing}
-      active={true}
-      title={"Hitchhiker Modal"}
-      overflowVisible={overflowVisible}
-      footer={footer}
-    />
-  );
+const NonCloseableModal: FC = ({ children }) => {
+  return <Modal body={children} closeFunction={doNothing} active={true} title={"Hitchhiker Modal"} />;
 };
 
 const CloseableModal: FC = ({ children }) => {

package/src/modals/Modal.tsx

@@ -42,24 +42,10 @@ type Props = {
   headColor?: string;
   headTextColor?: string;
   size?: ModalSize;
-  overflowVisible?: boolean;
 };
 
-const SizedModal = styled.div<{ size?: ModalSize; overflow: string }>`
+const SizedModal = styled.div<{ size?: ModalSize }>`
   width: ${props => (props.size ? `${modalSizes[props.size]}%` : "640px")};
-  overflow: ${props => props.overflow};
-`;
-
-const DivWithOptionalOverflow = styled.div<{ overflow: string; borderBottomRadius: string }>`
-  overflow: ${props => props.overflow};
-  border-bottom-left-radius: ${props => props.borderBottomRadius};
-  border-bottom-right-radius: ${props => props.borderBottomRadius};
-`;
-
-const SectionWithOptionalOverflow = styled.section<{ overflow: string; borderBottomRadius: string }>`
-  overflow: ${props => props.overflow};
-  border-bottom-left-radius: ${props => props.borderBottomRadius};
-  border-bottom-right-radius: ${props => props.borderBottomRadius};
 `;
 
 export const Modal: FC<Props> = ({
@@ -71,8 +57,7 @@ export const Modal: FC<Props> = ({
   className,
   headColor = "secondary-less",
   headTextColor = "secondary-most",
-  size,
-  overflowVisible
+  size
 }) => {
   const portalRootElement = usePortalRootElement("modalsRoot");
   const initialFocusRef = useRef(null);
@@ -100,29 +85,18 @@ export const Modal: FC<Props> = ({
     }
   };
 
-  const overflowAttribute = overflowVisible ? "visible" : "auto";
-  const borderBottomRadiusAttribute = overflowVisible && !footer ? "inherit" : "unset";
-
   const modalElement = (
-    <DivWithOptionalOverflow
-      className={classNames("modal", className, isActive)}
-      ref={trapRef}
-      onKeyDown={onKeyDown}
-      overflow={overflowAttribute}
-      borderBottomRadius={borderBottomRadiusAttribute}
-    >
+    <div className={classNames("modal", className, isActive)} ref={trapRef} onKeyDown={onKeyDown}>
       <div className="modal-background" onClick={closeFunction} />
-      <SizedModal className="modal-card" size={size} overflow={overflowAttribute}>
+      <SizedModal className="modal-card" size={size}>
         <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
           <h2 className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</h2>
           <button className="delete" aria-label="close" onClick={closeFunction} ref={initialFocusRef} autoFocus />
         </header>
-        <SectionWithOptionalOverflow className="modal-card-body" overflow={overflowAttribute} borderBottomRadius={borderBottomRadiusAttribute}>
-          {body}
-        </SectionWithOptionalOverflow>
+        <section className="modal-card-body">{body}</section>
         {showFooter}
       </SizedModal>
-    </DivWithOptionalOverflow>
+    </div>
   );
 
   return ReactDOM.createPortal(modalElement, portalRootElement);