@truedat/core 8.5.6 → 8.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.5.6",
+  "version": "8.5.8",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.5.6",
+    "@truedat/test": "8.5.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -95,5 +95,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "41e5e6138f5622558bae4151e720c040c4581162"
+  "gitHead": "61ad9443b3d822d30dcfa977f5fad3494b3ed5b4"
 }

package/src/components/GroupActions.js

@@ -1,18 +1,59 @@
+import { useCallback, useMemo, useState } from "react";
 import PropTypes from "prop-types";
-import { Dropdown } from "semantic-ui-react";
+import { Dropdown, Icon } from "semantic-ui-react";
+
+const ICON_TEXT_CONTROL_CLASSNAME = "td-icon-text-control";
+
+const normalizeAction = (action) => {
+  if (!action?.icon || !(action?.text || action?.content)) {
+    return action;
+  }
+
+  return {
+    ...action,
+    className: [action.className, ICON_TEXT_CONTROL_CLASSNAME]
+      .filter(Boolean)
+      .join(" "),
+  };
+};
 
 export const GroupActions = ({
   availableActions,
   direction = "left",
   disabled,
 }) => {
+  const [open, setOpen] = useState(false);
+  const closeDropdown = useCallback(() => setOpen(false), []);
+
+  const options = useMemo(
+    () =>
+      availableActions?.map((action) => {
+        const { closeDropdownOnClose, ...restAction } = action;
+
+        return normalizeAction({
+          ...restAction,
+          onClick: (event, data) => {
+            closeDropdown();
+            action?.onClick?.(event, data);
+          },
+          ...(closeDropdownOnClose ? { closeDropdown } : {}),
+        })
+      }),
+    [availableActions, closeDropdown]
+  );
+
   return (
     <Dropdown
-      icon="ellipsis vertical"
+      trigger={<Icon name="ellipsis vertical" />}
       className="button icon group-actions"
       floating
       disabled={disabled}
-      options={availableActions}
+      open={open}
+      value={null}
+      onOpen={() => !disabled && setOpen(true)}
+      onClose={closeDropdown}
+      openOnFocus={false}
+      options={options}
       direction={direction}
     />
   );

package/src/components/HistoryBackButton.js

@@ -9,6 +9,7 @@ export const HistoryBackButton = ({ content, disabled, secondary = true }) => {
     <Button
       as={Link}
       to="#"
+      className="td-icon-text-control"
       content={content}
       disabled={disabled}
       secondary={secondary}

package/src/components/LanguagesTabs.js

@@ -47,7 +47,7 @@ const LanguagesTabs = ({
   }, [requiredLangs, altLangs]);
 
   useEffect(() => {
-    initLang !== selectedLang && onLangChange(initLang);
+    initLang && initLang !== selectedLang && onLangChange(initLang);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initLang]);
 
@@ -67,8 +67,11 @@ const LanguagesTabs = ({
           onLangChange(selected);
         }
       }}
-      activeIndex={translationTabs.findIndex(
-        (tab) => tab.lang === selectedLang
+      activeIndex={Math.max(
+        translationTabs.findIndex(
+          (tab) => tab.lang === (selectedLang || initLang)
+        ),
+        0
       )}
     />
   );

package/src/components/ResourceMembersActions.js

@@ -15,6 +15,7 @@ export const ResourceMembersActions = ({ resource: { type, id }, actions }) => {
     <Button
       floated="right"
       primary
+      className="td-icon-text-control"
       content={<FormattedMessage id="domain.actions.add_member" />}
       icon="add user"
       as={Link}

package/src/components/TemplateSelector.js

@@ -30,10 +30,27 @@ export const TemplateSelector = ({
   placeholder,
   hideLabel = false,
   disabled,
+  liftRequiredLabel = false,
+  showSingleOption = false,
 }) => {
   const { formatMessage } = useIntl();
   const options = makeOptions(formatMessage)(templates);
-  const hidden = loading ? false : _.size(templates) <= 1;
+  const hidden = loading
+    ? false
+    : _.isEmpty(templates) || (!showSingleOption && _.size(templates) <= 1);
+  const showRequiredLabel = !selectedValue && required;
+  const labelContent = label ? (
+    label
+  ) : (
+    <FormattedMessage id="template.selector.label" />
+  );
+  const shouldLiftRequiredLabel = liftRequiredLabel && showRequiredLabel;
+  const labelClassName = shouldLiftRequiredLabel
+    ? "template-selector-label template-selector-label-lifted"
+    : undefined;
+  const requiredLabelClassName = shouldLiftRequiredLabel
+    ? "template-selector-required-label"
+    : "";
 
   const handleChange = (e, { value, ...data }) => {
     const template = _.find({ id: value })(templates);
@@ -43,10 +60,10 @@ export const TemplateSelector = ({
   return hidden ? null : (
     <Form.Field required={required}>
       {hideLabel ? null : (
-        <label>
-          {label ? label : <FormattedMessage id="template.selector.label" />}
-          {!selectedValue && required ? (
-            <Label pointing="left">
+        <label className={labelClassName}>
+          {labelContent}
+          {showRequiredLabel ? (
+            <Label className={requiredLabelClassName} pointing="left">
               <FormattedMessage id="template.form.validation.empty_required" />
             </Label>
           ) : null}
@@ -88,6 +105,8 @@ TemplateSelector.propTypes = {
   placeholder: PropTypes.string,
   hideLabel: PropTypes.bool,
   disabled: PropTypes.bool,
+  liftRequiredLabel: PropTypes.bool,
+  showSingleOption: PropTypes.bool,
 };
 
 const emptyTemplates = [];

package/src/components/TreeSelector.js

@@ -14,13 +14,18 @@ export const matchAny = recursiveMatch(match);
 
 export const SelectedLabels = ({
   disabled,
+  multiple,
   onClick,
   options,
   placeholder,
   value,
 }) =>
   _.isEmpty(value) ? (
-    <label>{placeholder}</label>
+    <div className="default text">{placeholder}</div>
+  ) : !multiple && _.size(value) === 1 ? (
+    <div className="text">
+      {_.flow(_.find({ id: _.head(value) }), _.prop("name"))(options)}
+    </div>
   ) : (
     _.map((id) => (
       <Label key={id}>
@@ -41,6 +46,7 @@ export const SelectedLabels = ({
 
 SelectedLabels.propTypes = {
   disabled: PropTypes.bool,
+  multiple: PropTypes.bool,
   onClick: PropTypes.func,
   options: PropTypes.array,
   placeholder: PropTypes.string,
@@ -80,6 +86,7 @@ export const TreeSelector = ({
 }) => {
   const [query, setQuery] = useState();
   const [open, setOpen] = useState(null);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const [displayed, setDisplayed] = useState([]);
   const [currentAllNodesOpen, setCurrentAllNodesOpen] = useState(false);
 
@@ -158,6 +165,9 @@ export const TreeSelector = ({
 
   const handleClick = (e, id) => {
     const nextValue = multiple ? toggle(id)(value) : value === id ? null : id;
+    if (!multiple) {
+      setDropdownOpen(false);
+    }
     onChange && onChange(e, { value: nextValue });
   };
 
@@ -170,6 +180,7 @@ export const TreeSelector = ({
   const trigger = labels ? (
     <SelectedLabels
       disabled={disabled}
+      multiple={multiple}
       placeholder={placeholder}
       options={options}
       onClick={handleClick}
@@ -238,6 +249,9 @@ export const TreeSelector = ({
         multiple={multiple}
         name={name}
         onBlur={onBlur}
+        onClose={() => setDropdownOpen(false)}
+        onOpen={() => setDropdownOpen(true)}
+        open={dropdownOpen}
         required={required}
         trigger={trigger}
         upward={false}

package/src/components/UploadModal.js

@@ -170,6 +170,7 @@ export const UploadModal = (props) => {
                     </p>
                     <Button
                       secondary
+                      className="td-icon-text-control"
                       icon="upload"
                       onClick={(e) => {
                         e.stopPropagation();

package/src/components/__tests__/GroupActions.spec.js

@@ -1,8 +1,9 @@
+import { fireEvent } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { GroupActions } from "..";
 
 const actions = [
-  { key: 1, text: "First Item", value: 1 },
+  { key: 1, icon: "edit", text: "First Item", value: 1 },
   { key: 2, text: "Second Item", value: 2 },
 ];
 
@@ -20,4 +21,25 @@ describe("<GroupActions />", () => {
     const dropdown = getByRole("listbox");
     expect(dropdown).toHaveAttribute("aria-disabled", "true");
   });
+
+  it("adds the shared class to icon and text actions", () => {
+    const { container } = render(<GroupActions availableActions={actions} />);
+    expect(container.querySelector(".item.td-icon-text-control")).toBeTruthy();
+  });
+
+  it("keeps the trigger icon-only after selecting an action", () => {
+    const { getByRole, getAllByRole } = render(
+      <GroupActions availableActions={actions} />
+    );
+
+    const dropdown = getByRole("listbox");
+    fireEvent.click(dropdown);
+    fireEvent.click(getAllByRole("option")[0]);
+
+    expect(
+      Array.from(dropdown.children).some((child) =>
+        child.classList.contains("text")
+      )
+    ).toBeFalsy();
+  });
 });

package/src/components/__tests__/HistoryBackButton.spec.js

@@ -32,4 +32,11 @@ describe("<HistoryBackButton />", () => {
     expect(preventDefault).toHaveBeenCalled();
     expect(mockNavigate).toHaveBeenCalledWith(-1);
   });
+
+  it("uses the shared icon and text control class", async () => {
+    const rendered = render(<HistoryBackButton {...props} />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByRole("button")).toHaveClass("td-icon-text-control");
+  });
 });

package/src/components/__tests__/TreeSelector.spec.js

@@ -55,6 +55,9 @@ describe("<TreeSelector />", () => {
     await user.click(rendered.getByRole("option", { name: /foo/i }));
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: ["1"] });
+    expect(
+      rendered.getByRole("option", { name: /foo/i })
+    ).toBeInTheDocument();
   });
 
   it("calls onChange with selected values (single)", async () => {
@@ -79,6 +82,11 @@ describe("<TreeSelector />", () => {
     await user.click(rendered.getByRole("option", { name: /foo/i }));
     expect(props.onChange.mock.calls.length).toBe(1);
     expect(props.onChange.mock.calls[0][1]).toEqual({ value: "1" });
+    await waitFor(() => {
+      expect(
+        rendered.getByRole("listbox")
+      ).toHaveAttribute("aria-expanded", "false");
+    });
   });
 
   it("select node with allowed depth (multiple)", async () => {

package/src/components/__tests__/__snapshots__/AddMemberForm.spec.js.snap

@@ -175,7 +175,7 @@ exports[`<AddMemberForm /> matches the latest snapshot 1`] = `
         domain.actions.add_member
       </button>
       <a
-        class="ui secondary button"
+        class="ui secondary button td-icon-text-control"
         data-discover="true"
         href="/"
         role="button"

package/src/components/__tests__/__snapshots__/AddResourceMember.spec.js.snap

@@ -147,7 +147,7 @@ exports[`<AddResourceMember /> matches the latest snapshot 1`] = `
           domain.actions.add_member
         </button>
         <a
-          class="ui secondary button"
+          class="ui secondary button td-icon-text-control"
           data-discover="true"
           href="/"
           role="button"

package/src/components/__tests__/__snapshots__/GroupActions.spec.js.snap

@@ -12,16 +12,24 @@ exports[`<GroupActions /> matches the latest snapshot 1`] = `
       aria-hidden="true"
       class="ellipsis vertical icon"
     />
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
     <div
       class="left menu transition"
     >
       <div
         aria-checked="false"
         aria-selected="true"
-        class="selected item"
+        class="selected item td-icon-text-control"
         role="option"
         style="pointer-events: all;"
       >
+        <i
+          aria-hidden="true"
+          class="edit icon"
+        />
         <span
           class="text"
         >

package/src/components/__tests__/__snapshots__/HistoryBackButton.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`<HistoryBackButton /> matches the latest snapshot 1`] = `
 <div>
   <a
-    class="ui secondary button"
+    class="ui secondary button td-icon-text-control"
     data-discover="true"
     href="/"
     role="button"

package/src/components/__tests__/__snapshots__/ResourceMembers.spec.js.snap

@@ -22,7 +22,7 @@ exports[`<ResourceMembers /> matches the latest snapshot 1`] = `
         />
       </div>
       <a
-        class="ui primary right floated button"
+        class="ui primary right floated button td-icon-text-control"
         data-discover="true"
         href="/domains/1/members/new"
         role="button"

package/src/components/__tests__/__snapshots__/ResourceMembersAction.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`<ResourceMembersActions /> matches the latest snapshot 1`] = `
 <div>
   <a
-    class="ui primary right floated button"
+    class="ui primary right floated button td-icon-text-control"
     data-discover="true"
     href="/domains/1/members/new"
     role="button"

package/src/i18n/components/__tests__/__snapshots__/MessageForm.spec.js.snap

@@ -35,7 +35,7 @@ exports[`<MessageForm /> matches the latest snapshot 1`] = `
         Save
       </button>
       <a
-        class="ui secondary button"
+        class="ui secondary button td-icon-text-control"
         data-discover="true"
         href="/"
         role="button"

package/src/i18n/components/__tests__/__snapshots__/NewMessage.spec.js.snap

@@ -71,7 +71,7 @@ exports[`<NewMessage /> matches the latest snapshot 1`] = `
           Save
         </button>
         <a
-          class="ui secondary button"
+          class="ui secondary button td-icon-text-control"
           data-discover="true"
           href="/"
           role="button"

package/src/styles/IconTextControls.less

@@ -0,0 +1,32 @@
+.td-icon-text-control {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  vertical-align: middle;
+  line-height: 1.2;
+
+  &.fluid {
+    display: flex !important;
+  }
+
+  > .icon:not(.button):not(.dropdown),
+  > i.icon {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    flex: 0 0 16px;
+    font-size: 16px;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+  }
+
+  > .text,
+  > span {
+    line-height: 1.2;
+  }
+}

package/src/styles/OptionGroup.less

@@ -0,0 +1,4 @@
+.ui.dropdown .menu > .item.group {
+  padding-left: 20px !important;
+  padding-right: 0 !important;
+}

package/src/styles/TemplateSelector.less

@@ -0,0 +1,17 @@
+.ui.form .field {
+  & > .template-selector-label.template-selector-label-lifted {
+    display: inline-block;
+    position: relative;
+    overflow: visible;
+
+    & > .template-selector-required-label.ui.left.pointing.label {
+      position: absolute;
+      top: 0;
+      left: calc(100% + 0.6666em);
+      margin: 0;
+      transform: translateY(-25%);
+      white-space: nowrap;
+      z-index: 1;
+    }
+  }
+}

package/src/styles/TreeSelector.less

@@ -0,0 +1,39 @@
+.fix-dropdown-selector {
+  .ui.floating.dropdown {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    outline: 0;
+    width: 100%;
+    background: #ffffff;
+    border: 1px solid #d4d4d5;
+    border-radius: 4px;
+    padding: 0.5em 2.1em 0.5em 1em;
+    min-height: 2.71428571em;
+    transition: border-color 0.1s ease, box-shadow 0.1s ease;
+
+    .dropdown.icon {
+      position: absolute;
+      right: 0.75em;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .menu.transition {
+      width: 100%;
+    }
+  }
+
+  .ui.floating.dropdown.visible {
+    z-index: 100;
+  }
+
+  .ui.floating.dropdown:hover,
+  .ui.floating.dropdown:focus-visible {
+    border-color: #85b7d9;
+  }
+
+  .ui.floating.dropdown:focus-visible {
+    box-shadow: 0 0 0 2px rgba(33, 133, 208, 0.18);
+  }
+}

package/src/styles/GroupActions.less

@@ -1,3 +0,0 @@
-.ui.icon.button > .icon.ellipsis.vertical{
-    height: 1em;
-}

package/src/styles/graphTokens.less

@@ -1,26 +0,0 @@
-:root {
-  --td-graph-theme-primary: #ed5c17;
-
-  /* Graph palette – Relations Graph (React Flow) */
-  --td-graph-bg: #f7f8fa;
-  --td-graph-node-bg: #ffffff;
-  --td-graph-node-border: #d0d5e0;
-  --td-graph-node-text: #151a24;
-  --td-graph-node-hover-border: #2f3443;
-  --td-graph-node-shadow: 0 2px 6px rgba(21, 26, 36, 0.08);
-  --td-graph-node-hover-shadow: 0 6px 18px rgba(21, 26, 36, 0.14);
-  --td-graph-node-active-bg: var(--td-graph-theme-primary);
-  --td-graph-node-active-text: #ffffff;
-  --td-graph-node-active-shadow: 0 4px 14px rgba(237, 92, 23, 0.35);
-  --td-graph-edge-stroke: #a2a9b8;
-  --td-graph-edge-label-text: #3a4150;
-  --td-graph-edge-label-bg: #f7f8fa;
-  --td-graph-handle-bg: #b0b8c8;
-  --td-graph-handle-border: #ffffff;
-  --td-graph-accent: var(--td-graph-theme-primary);
-  --td-graph-depth-disabled: #bdbdbd;
-  --td-graph-depth-inactive: #c9c9c9;
-  --td-graph-border: #d4d4d5;
-  --td-graph-border-radius: 10px;
-
-}