@hellobetterdigitalnz/betterui 0.0.3-337 → 0.0.3-338

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellobetterdigitalnz/betterui",
-  "version": "0.0.3-337",
+  "version": "0.0.3-338",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/Components/Form/DropdownField/DropdownField.stories.tsx

@@ -1,52 +1,48 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import DropdownField from "./DropdownField";
-import {NameValueInterface} from "./DropdownFieldProps";
-import Users from "../../Icons/People/Users/Users";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Form / Dropdown Field',
-  component: DropdownField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof DropdownField>;
-
-export default meta;
-type Story = StoryObj<typeof DropdownField>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
-  args: {
-    name: 'dropdown-field',
-    placeholder: 'Super long placeholder text',
-    options: [
-      'Lorem ipsum',
-      'Suspendisse sit amet',
-      'In sagittis metus'
-    ]
-  },
-};
-
-export const Props: Story = {
-  args: {
-    name: 'dropdown-field',
-    placeholder: 'Placeholder text',
-    options: [
-      {
-        label: 'Lorem ipsum',
-        value: 1,
-        icon: <Users/>
-      },
-      {
-        label: 'In sagittis metus',
-        value: 2
-      },
-      {
-        label: 'Suspendisse potenti',
-        value: 3
-      },
-    ] as NameValueInterface[]
-  },
-};
+import type { Meta, StoryObj } from "@storybook/react";
+import DropdownField from "./DropdownField";
+import { NameValueInterface } from "./DropdownFieldProps";
+import Users from "../../Icons/People/Users/Users";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / Dropdown Field",
+  component: DropdownField,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DropdownField>;
+
+export default meta;
+type Story = StoryObj<typeof DropdownField>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    name: "dropdown-field",
+    placeholder: "Super long placeholder text",
+    options: ["Lorem ipsum", "Suspendisse sit amet", "In sagittis metus"],
+  },
+};
+
+export const Props: Story = {
+  args: {
+    name: "dropdown-field",
+    placeholder: "Placeholder text",
+    options: [
+      {
+        label: "Lorem ispsum",
+        value: 1,
+        icon: <Users />,
+      },
+      {
+        label: "In sagittis metus",
+        value: 2,
+      },
+      {
+        label: "Suspendisse potenti",
+        value: 3,
+      },
+    ] as NameValueInterface[],
+  },
+};

package/src/Components/Form/DropdownField/DropdownField.tsx

@@ -1,243 +1,270 @@
-import cx from "classnames";
-import DropdownFieldProps, { NameValueInterface } from "./DropdownFieldProps";
-import styles from "./dropdown.module.scss";
-import { useEffect, useState, useRef, MouseEvent, useCallback } from "react";
-import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
-import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
-import DropdownFieldSelector from "./DropdownFieldSelector";
-import DropdownFieldItem from "./DropdownFieldItem";
-import LoadingInput from "../LoadingInput/LoadingInput.tsx";
-import { createPortal } from "react-dom";
-
-const DropdownField = (props: DropdownFieldProps) => {
-  const {
-    name,
-    id,
-    value,
-    options,
-    placeholder,
-    extraClass,
-    disabled = false,
-    readonly = false,
-    error,
-    ariaLabel,
-    required,
-    emptyString,
-    commentInDropdown,
-    loading,
-    onChange,
-  } = props;
-
-  const [opened, setOpened] = useState(false);
-  const [selected, setSelected] = useState<string | number | undefined | null | boolean>();
-  const [label, setLabel] = useState("");
-  const [dropdownStyles, setDropdownStyles] = useState<React.CSSProperties>({});
-
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const dropdownSelectorRef = useRef<HTMLDivElement>(null);
-  const controlRef = useRef<HTMLDivElement>(null);
-  const lastPosition = useRef<DOMRect | null>(null);
-
-  useEffect(() => {
-    setSelected(value);
-  }, [value]);
-
-  useEffect(() => {
-    for (const option of options) {
-      let matched = null;
-      if (typeof option === "string") {
-        matched = option === selected ? option : null;
-      } else {
-        matched = option.value === selected ? option.label : null;
-      }
-      if (matched) {
-        setLabel(matched);
-        break;
-      }
-    }
-  }, [selected, options]);
-
-  const updateDropdownPosition = useCallback(() => {
-    if (opened && controlRef.current && dropdownSelectorRef.current) {
-      const rect = controlRef.current.getBoundingClientRect();
-      const dropdownHeight = dropdownSelectorRef.current.offsetHeight;
-      const spaceBelow = window.innerHeight - rect.bottom;
-
-      const dropdownTop = spaceBelow < dropdownHeight ? rect.top - dropdownHeight : rect.bottom;
-
-      setDropdownStyles({
-        top: `${dropdownTop}px`,
-        left: `${rect.left}px`,
-        width: `${rect.width}px`,
-        position: 'fixed',
-        zIndex: 99999,
-      });
-    }
-  }, [opened]);
-
-  const handlePositionChanges = useCallback(() => {
-    if (!controlRef.current) return;
-
-    updateDropdownPosition();
-    const currentPosition = controlRef.current.getBoundingClientRect();
-
-    if (opened && lastPosition.current && (
-      lastPosition.current.top !== currentPosition.top ||
-      lastPosition.current.left !== currentPosition.left
-    )) {
-      setOpened(false);
-    }
-
-    lastPosition.current = currentPosition;
-  }, [opened, updateDropdownPosition]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        dropdownSelectorRef.current &&
-        !dropdownSelectorRef.current.contains(event.target as Node)
-      ) {
-        setOpened(false);
-      }
-    };
-
-    // @ts-ignore
-    document.addEventListener("mousedown", handleClickOutside);
-
-    return () => {
-      // @ts-ignore
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (opened) {
-      window.addEventListener('resize', handlePositionChanges);
-      window.addEventListener('scroll', handlePositionChanges, true);
-      updateDropdownPosition();
-    }
-
-    return () => {
-      window.removeEventListener('resize', handlePositionChanges);
-      window.removeEventListener('scroll', handlePositionChanges, true);
-    };
-  }, [opened, handlePositionChanges, updateDropdownPosition]);
-
-  useEffect(() => {
-    if (!controlRef.current) return;
-
-    const observer = new ResizeObserver(() => {
-      if (!controlRef.current) return;
-
-      const currentPosition = controlRef.current.getBoundingClientRect();
-      if (lastPosition.current && (
-        lastPosition.current.y !== currentPosition.y ||
-        lastPosition.current.x !== currentPosition.x ||
-        lastPosition.current.top !== currentPosition.top ||
-        lastPosition.current.left !== currentPosition.left
-      )) {
-        setOpened(false);
-      }
-      lastPosition.current = currentPosition;
-    });
-
-    observer.observe(controlRef.current);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  const classNames = [styles.dropdown];
-
-  if (error) {
-    classNames.push(styles.error);
-  }
-
-  if (extraClass) {
-    classNames.push(extraClass);
-  }
-
-  if (disabled) {
-    classNames.push(styles.disabled);
-  }
-
-  const handleOpenClose = () => {
-    if (disabled || readonly) return;
-    setOpened(!opened);
-  };
-  const handleSelect = (
-    e: MouseEvent,
-    value: string | number | undefined | null | boolean
-  ) => {
-    e.stopPropagation()
-    setSelected(value);
-    setOpened(false);
-    if (onChange) {
-      onChange(e, value);
-    }
-  };
-
-
-  return (
-    <div ref={dropdownRef} className={cx(classNames)}>
-      {loading && <LoadingInput />}
-      <div ref={controlRef} className={styles.control} onClick={handleOpenClose}>
-        {!selected && placeholder && (
-          <div className={styles.placeholder} aria-label={ariaLabel}>
-            {placeholder}
-          </div>
-        )}
-        {(selected || !placeholder) && (
-          <div className={styles.label} aria-label={ariaLabel}>
-            {label}
-            {!!selected && <div className={styles.reset}></div>}
-          </div>
-        )}
-        <div className={styles.chevron}>
-          {!opened && <CaretDown />}
-          {!!opened && <CaretUp />}
-        </div>
-      </div>
-      { opened && (!readonly && !disabled) &&  createPortal(
-          <DropdownFieldSelector ref={dropdownSelectorRef} style={{ ...dropdownStyles}}>
-            {commentInDropdown && (
-              <div className={styles.message}>{commentInDropdown}</div>
-            )}
-            {!!emptyString && (
-              <DropdownFieldItem
-                label={emptyString}
-                value={''}
-                handleSelect={handleSelect}
-              />
-            )}
-            {options.map((option: string | NameValueInterface, index: number) => {
-              return (
-                <DropdownFieldItem
-                  key={index}
-                  handleSelect={handleSelect}
-                  label={typeof option === "object" ? option.label : option}
-                  value={typeof option === "object" ? option.value : option}
-                />
-              );
-            })}
-          </DropdownFieldSelector>,
-          document.body
-      )}
-
-      <input
-        name={name}
-        value={selected ? selected.toString() : ""}
-        id={id}
-        type={"hidden"}
-        required={required}
-        disabled={disabled}
-        readOnly={readonly}
-      />
-    </div>
-  );
-};
-
-export default DropdownField;
+import cx from "classnames";
+import DropdownFieldProps, { NameValueInterface } from "./DropdownFieldProps";
+import styles from "./dropdown.module.scss";
+import { useEffect, useState, useRef, MouseEvent, useCallback } from "react";
+import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
+import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
+import DropdownFieldSelector from "./DropdownFieldSelector";
+import DropdownFieldItem from "./DropdownFieldItem";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+import { createPortal } from "react-dom";
+
+const DropdownField = (props: DropdownFieldProps) => {
+  const {
+    name,
+    id,
+    value,
+    options,
+    placeholder,
+    extraClass,
+    disabled = false,
+    readonly = false,
+    error,
+    ariaLabel,
+    required,
+    emptyString,
+    commentInDropdown,
+    loading,
+    onChange,
+  } = props;
+
+  const [opened, setOpened] = useState(false);
+  const [selected, setSelected] = useState<
+    string | number | undefined | null | boolean
+  >();
+  const [label, setLabel] = useState("");
+  const [dropdownStyles, setDropdownStyles] = useState<React.CSSProperties>({});
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownSelectorRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+  const lastPosition = useRef<DOMRect | null>(null);
+  const [selectedIcon, setSelectedIcon] = useState<React.ReactNode>(null);
+
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
+  useEffect(() => {
+    for (const option of options) {
+      let matched = null;
+      if (typeof option === "string") {
+        matched = option === selected ? option : null;
+      } else {
+        matched = option.value === selected ? option.label : null;
+      }
+      if (matched) {
+        setLabel(matched);
+        setSelectedIcon(
+          typeof option === "object" ? (option.icon ?? null) : null,
+        );
+        break;
+      }
+    }
+  }, [selected, options]);
+
+  const updateDropdownPosition = useCallback(() => {
+    if (opened && controlRef.current && dropdownSelectorRef.current) {
+      const rect = controlRef.current.getBoundingClientRect();
+      const dropdownHeight = dropdownSelectorRef.current.offsetHeight;
+      const spaceBelow = window.innerHeight - rect.bottom;
+
+      const dropdownTop =
+        spaceBelow < dropdownHeight ? rect.top - dropdownHeight : rect.bottom;
+
+      setDropdownStyles({
+        top: `${dropdownTop}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        position: "fixed",
+        zIndex: 99999,
+      });
+    }
+  }, [opened]);
+
+  const handlePositionChanges = useCallback(() => {
+    if (!controlRef.current) return;
+
+    updateDropdownPosition();
+    const currentPosition = controlRef.current.getBoundingClientRect();
+
+    if (
+      opened &&
+      lastPosition.current &&
+      (lastPosition.current.top !== currentPosition.top ||
+        lastPosition.current.left !== currentPosition.left)
+    ) {
+      setOpened(false);
+    }
+
+    lastPosition.current = currentPosition;
+  }, [opened, updateDropdownPosition]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        dropdownSelectorRef.current &&
+        !dropdownSelectorRef.current.contains(event.target as Node)
+      ) {
+        setOpened(false);
+      }
+    };
+
+    // @ts-ignore
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      // @ts-ignore
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (opened) {
+      window.addEventListener("resize", handlePositionChanges);
+      window.addEventListener("scroll", handlePositionChanges, true);
+      updateDropdownPosition();
+    }
+
+    return () => {
+      window.removeEventListener("resize", handlePositionChanges);
+      window.removeEventListener("scroll", handlePositionChanges, true);
+    };
+  }, [opened, handlePositionChanges, updateDropdownPosition]);
+
+  useEffect(() => {
+    if (!controlRef.current) return;
+
+    const observer = new ResizeObserver(() => {
+      if (!controlRef.current) return;
+
+      const currentPosition = controlRef.current.getBoundingClientRect();
+      if (
+        lastPosition.current &&
+        (lastPosition.current.y !== currentPosition.y ||
+          lastPosition.current.x !== currentPosition.x ||
+          lastPosition.current.top !== currentPosition.top ||
+          lastPosition.current.left !== currentPosition.left)
+      ) {
+        setOpened(false);
+      }
+      lastPosition.current = currentPosition;
+    });
+
+    observer.observe(controlRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const classNames = [styles.dropdown];
+
+  if (error) {
+    classNames.push(styles.error);
+  }
+
+  if (extraClass) {
+    classNames.push(extraClass);
+  }
+
+  if (disabled) {
+    classNames.push(styles.disabled);
+  }
+
+  const handleOpenClose = () => {
+    if (disabled || readonly) return;
+    setOpened(!opened);
+  };
+  const handleSelect = (
+    e: MouseEvent,
+    value: string | number | undefined | null | boolean,
+  ) => {
+    e.stopPropagation();
+    setSelected(value);
+    setOpened(false);
+    if (onChange) {
+      onChange(e, value);
+    }
+  };
+
+  return (
+    <div ref={dropdownRef} className={cx(classNames)}>
+      {loading && <LoadingInput />}
+      <div
+        ref={controlRef}
+        className={styles.control}
+        onClick={handleOpenClose}
+      >
+        {!selected && placeholder && (
+          <div className={styles.placeholder} aria-label={ariaLabel}>
+            {placeholder}
+          </div>
+        )}
+        {(selected || !placeholder) && (
+          <div className={styles.label} aria-label={ariaLabel}>
+            {selectedIcon && (
+              <div className={`${styles.labelIcon} labelIcon`}>
+                {selectedIcon}
+              </div>
+            )}
+            {label}
+            {!!selected && <div className={styles.reset}></div>}
+          </div>
+        )}
+        <div className={styles.chevron}>
+          {!opened && <CaretDown />}
+          {!!opened && <CaretUp />}
+        </div>
+      </div>
+      {opened &&
+        !readonly &&
+        !disabled &&
+        createPortal(
+          <DropdownFieldSelector
+            ref={dropdownSelectorRef}
+            style={{ ...dropdownStyles }}
+          >
+            {commentInDropdown && (
+              <div className={styles.message}>{commentInDropdown}</div>
+            )}
+            {!!emptyString && (
+              <DropdownFieldItem
+                label={emptyString}
+                value={""}
+                handleSelect={handleSelect}
+              />
+            )}
+            {options.map(
+              (option: string | NameValueInterface, index: number) => {
+                return (
+                  <DropdownFieldItem
+                    key={index}
+                    handleSelect={handleSelect}
+                    label={typeof option === "object" ? option.label : option}
+                    value={typeof option === "object" ? option.value : option}
+                    icon={typeof option === "object" ? option.icon : undefined}
+                  />
+                );
+              },
+            )}
+          </DropdownFieldSelector>,
+          document.body,
+        )}
+
+      <input
+        name={name}
+        value={selected ? selected.toString() : ""}
+        id={id}
+        type={"hidden"}
+        required={required}
+        disabled={disabled}
+        readOnly={readonly}
+      />
+    </div>
+  );
+};
+
+export default DropdownField;