@eightshift/ui-components 5.0.0 → 5.0.1

package/dist/components/link-input/link-input.js

@@ -0,0 +1,291 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-wERNNG0T.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-D1LPUwWP.js";
+import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-C5iZpSAM.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input--mF4XVE1.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Fp6AwSRn.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-4oW9kh3R.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D190gMbE.js";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { icons } from "../../icons/icons.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { useRef, useState, useEffect, cloneElement } from "react";
+import { Spacer } from "../spacer/spacer.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+/**
+ * Component that allows URL selection, with a suggestionList of suggestions and type-to-search.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.url] - The current URL.
+ * @param {Function} [props.onChange] - Function to run when the URL changes.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {string} [props.help] - Help text to display below the input.
+ * @param {string} [props.placeholder] - Placeholder to show in the input field.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
+ * @param {JSX.Element} [props.icon=icons.globe] - Icon to display in the label.
+ * @param {JSX.Element} [props.removeIcon=icons.clearAlt] - Icon to display in the input's clear button.
+ * @param {boolean} [props.disabled=false] - If `true`, the input is disabled.
+ * @param {Function} [props.fetchSuggestions] - A function that fetches suggestions based on the input value.
+ * @param {string} [props.className] - Classes to pass to the input field.
+ * @param {number} [props.inputDebounceDelay=500] - The delay in milliseconds before the input value is considered final.
+ * @param {Function} [props.suggestionTypeIconOverride] - Allows overriding the default icon for the suggestion type, e.g. when using CPTs. Should be in the format: `(type) => icon or React component`.
+ * @param {boolean} [props.showSuggestionsWhenEmpty] - If `true`, the suggestion list will be shown when down arrow is pressed even the input is empty.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The LinkInput component.
+ *
+ * @example
+ * <LinkInput
+ * 	url={url}
+ * 	onChange={setUrl}
+ * />
+ *
+ * @preserve
+ */
+const LinkInput = (props) => {
+  var _a;
+  const {
+    url = "",
+    onChange,
+    label = __("Link", "eightshift-ui-components"),
+    subtitle,
+    help,
+    actions,
+    placeholder = __("Type to search or enter URL", "eightshift-ui-components"),
+    icon = icons.globe,
+    removeIcon = icons.clearAlt,
+    disabled = false,
+    suggestionTypeIconOverride,
+    showSuggestionsWhenEmpty,
+    fetchSuggestions,
+    className,
+    hidden
+  } = props;
+  const canShowSuggestions = typeof fetchSuggestions !== "undefined";
+  const triggerRef = useRef(null);
+  const suggestionList = $f86e6c1ec7da6ebb$export$bc3384a35de93d66({
+    initialFilterText: url,
+    async load({ signal, filterText }) {
+      if (!canShowSuggestions) {
+        return {
+          items: []
+        };
+      }
+      const items = await fetchSuggestions(filterText, signal);
+      return {
+        items: items ?? []
+      };
+    }
+  });
+  const [shouldShowSuggestions, setShouldShowSuggestions] = useState(false);
+  useEffect(() => {
+    suggestionList.setFilterText(url);
+    if (!canShowSuggestions) {
+      setShouldShowSuggestions(false);
+      return;
+    }
+    if (!showSuggestionsWhenEmpty && url.length < 1) {
+      setShouldShowSuggestions(false);
+      return;
+    }
+    setShouldShowSuggestions(
+      !(showSuggestionsWhenEmpty !== true && url.trim().length < 3 || url.startsWith("#") || url.startsWith(":") || url.startsWith("mailto") || url.startsWith("tel") || url.startsWith("http") || url.startsWith("www"))
+    );
+  }, [url]);
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    $d01f2c01039c0eec$export$72b9695b8216309a,
+    {
+      items: suggestionList.items,
+      inputValue: suggestionList.filterText,
+      onInputChange: (value) => {
+        onChange({ url: value, isAnchor: value == null ? void 0 : value.includes("#") });
+        suggestionList.setFilterText(value);
+      },
+      allowsCustomValue: true,
+      allowsEmptyCollection: true,
+      isDisabled: disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          BaseControl,
+          {
+            as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            icon,
+            label,
+            subtitle,
+            actions,
+            labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            help,
+            children: /* @__PURE__ */ jsxs(
+              $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
+              {
+                className: "es:relative",
+                ref: triggerRef,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    $3985021b0ad6602f$export$f5b8910cec6cf069,
+                    {
+                      placeholder: disabled ? null : placeholder,
+                      className: clsx(
+                        "es:min-h-10 es:w-full es:rounded-lg es:border es:border-secondary-300 es:py-2 es:pl-2 es:pr-1 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950 es:bg-white",
+                        "es:any-focus:outline-hidden",
+                        "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                        "es:focus-visible:border-accent-500",
+                        "es:inset-ring es:inset-ring-secondary-100",
+                        "es:disabled:shadow-none! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
+                        (url == null ? void 0 : url.length) > 0 && "es:pr-10",
+                        className
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    AnimatedVisibility,
+                    {
+                      visible: !disabled && (url == null ? void 0 : url.length) > 0,
+                      className: "es:absolute es:inset-y-1 es:right-1",
+                      transition: "fade",
+                      children: /* @__PURE__ */ jsxs(
+                        $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+                        {
+                          slot: null,
+                          onPress: () => {
+                            suggestionList.setFilterText("");
+                            onChange({ url: void 0, isAnchor: false });
+                          },
+                          className: "es:any-focus:outline-hidden",
+                          children: [
+                            !(shouldShowSuggestions && suggestionList.isLoading) && /* @__PURE__ */ jsx(Tooltip, { text: __("Clear", "eightshift-ui-components"), children: /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: clsx(
+                                  "es:flex es:size-8 es:items-center es:justify-center es:rounded es:bg-white/85 es:text-secondary-600 es:backdrop-blur es:transition es:cursor-pointer",
+                                  "es:hover:bg-red-600/5 es:hover:text-red-600",
+                                  "es:icon:size-6"
+                                ),
+                                children: removeIcon
+                              }
+                            ) }),
+                            shouldShowSuggestions && suggestionList.isLoading && /* @__PURE__ */ jsx("div", { className: "es:p-1.5", children: cloneElement(icons.loader, { className: "es:text-accent-600! es:stroke-2 es:motion-preset-spin es:motion-duration-1500" }) })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        canShowSuggestions && shouldShowSuggestions && /* @__PURE__ */ jsxs(
+          $07b14b47974efb58$export$5b6b19405a83ff9d,
+          {
+            "aria-label": __("URL suggestions", "eightshift-ui-components"),
+            className: ({ isEntering, isExiting }) => clsx(
+              "es:border es:rounded-lg es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden es:min-w-72",
+              isEntering || !(suggestionList.isLoading || !shouldShowSuggestions) && "es:not-motion-reduce:motion-preset-slide-down-sm es:motion-reduce:motion-preset-fade es:motion-duration-300",
+              isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200",
+              (suggestionList.isLoading || !shouldShowSuggestions) && "es:invisible"
+            ),
+            offset: 3,
+            style: {
+              width: `${(_a = triggerRef.current) == null ? void 0 : _a.offsetWidth}px`
+            },
+            children: [
+              shouldShowSuggestions && !suggestionList.isLoading && suggestionList.items.length === 0 && /* @__PURE__ */ jsx(
+                RichLabel,
+                {
+                  icon: icons.searchEmpty,
+                  label: __("No results", "eightshift-ui-components"),
+                  subtitle: __("Try a different search term.", "eightshift-ui-components"),
+                  className: "es:min-h-12 es:p-2"
+                }
+              ),
+              suggestionList.items.length > 0 && !suggestionList.isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-1 es:p-1", children: (item) => {
+                  const {
+                    label: title,
+                    value: url2,
+                    metadata: { subtype: rawSubtype }
+                  } = item;
+                  const subtype = rawSubtype ?? "page";
+                  let typeIcon = icons.file;
+                  if (subtype.toLowerCase() === "url") {
+                    typeIcon = icons.externalLink;
+                  } else if (subtype.toLowerCase() === "attachment") {
+                    typeIcon = icons.file;
+                  } else if (subtype.toLowerCase() === "category") {
+                    typeIcon = icons.layoutAlt;
+                  } else if (subtype.toLowerCase() === "internal") {
+                    typeIcon = icons.anchor;
+                  } else if (subtype.toLowerCase() === "eightshift-forms") {
+                    typeIcon = icons.formAlt;
+                  }
+                  if (suggestionTypeIconOverride) {
+                    const overrideIcon = suggestionTypeIconOverride(subtype);
+                    if (overrideIcon) {
+                      typeIcon = overrideIcon;
+                    }
+                  }
+                  return /* @__PURE__ */ jsx(
+                    $eed445e0843c11d0$export$a11e76429ed99b4,
+                    {
+                      id: item.value,
+                      className: clsx(
+                        "es:rounded es:p-1 es:text-sm es:transition",
+                        "es:hover:border-secondary-300 es:hover:bg-secondary-100",
+                        "es:focus-visible:border-secondary-300 es:focus-visible:bg-secondary-100",
+                        "selected:es:bg-accent-600/10 selected:es:text-accent-900 selected:focus-visible:es:bg-accent-600/15"
+                      ),
+                      textValue: url2,
+                      children: /* @__PURE__ */ jsx(
+                        RichLabel,
+                        {
+                          icon: typeIcon,
+                          label: title,
+                          subtitle: url2 == null ? void 0 : url2.replace(location.origin, "").replace(/\/$/, ""),
+                          noColor: true
+                        }
+                      )
+                    }
+                  );
+                } }),
+                /* @__PURE__ */ jsx(
+                  Spacer,
+                  {
+                    border: true,
+                    className: "es:opacity-40"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-wrap es:items-center es:justify-end es:gap-x-3 es:gap-y-1.5 es:p-2 es:text-sm es:text-secondary-500", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↓" }),
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↑" }),
+                    __("Navigate", "eightshift-ui-components")
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↵" }),
+                    __("Select", "eightshift-ui-components")
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:h-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:tracking-tighter es:px-0.5 es:text-secondary-600", children: "Esc" }),
+                    __("Hide", "eightshift-ui-components")
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  LinkInput
+};

package/dist/components/matrix-align/matrix-align.js

@@ -0,0 +1,134 @@
+import { jsx } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { icons } from "../../icons/icons.js";
+import { pascalCase, upperFirst, camelCase } from "../../utilities/es-dash.js";
+import { Menu, MenuItem } from "../menu/menu.js";
+import { BaseControl } from "../base-control/base-control.js";
+/**
+ * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.
+ * Replaces the default Gutenberg `AlignmentMatrixControl`/`BlockAlignmentMatrixControl`/`BlockAlignmentMatrixToolbar`.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {MatrixSize} [props.size='3x3'] - The size of the matrix. Can be either '3x3' or '2x2'.
+ * @param {string} props.value - The currently selected value.
+ * @param {Function} props.onChange - Function to run when the selection changes.
+ * @param {string} [props.tooltip='Position'] - Tooltip text to display on the trigger button.
+ * @param {string} [props.label] - Label to display.
+ * @param {JSX.Element} [props.icon] - Icon to display within the button.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {string} [props.popoverPosition='bottom'] - The position of the popover.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The MatrixAlign component.
+ *
+ * @typedef {'3x3' | '2x2'} MatrixSize
+ * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPosition
+ *
+ * @example
+ * <MatrixAlign
+ * 		size='3x3'
+ * 		value='top left'
+ * 		onChange={setAlignment}
+ * />
+ *
+ * @preserve
+ */
+const MatrixAlign = (props) => {
+  const {
+    size = "3x3",
+    value,
+    onChange,
+    tooltip = __("Position", "eightshift-ui-components"),
+    label,
+    icon,
+    subtitle,
+    "aria-label": ariaLabel,
+    hidden
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  const allSizeOptions = [
+    {
+      value: "top left",
+      label: __("Top-left", "eightshift-ui-components"),
+      availableOn: ["3x3", "2x2"]
+    },
+    {
+      value: "top center",
+      label: __("Top-center", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "top right",
+      label: __("Top-right", "eightshift-ui-components"),
+      availableOn: ["3x3", "2x2"]
+    },
+    {
+      value: "center left",
+      label: __("Center-left", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "center center",
+      label: __("Center", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "center right",
+      label: __("Center-right", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "bottom left",
+      label: __("Bottom-left", "eightshift-ui-components"),
+      availableOn: ["3x3", "2x2"]
+    },
+    {
+      value: "bottom center",
+      label: __("Bottom-center", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "bottom right",
+      label: __("Bottom-right", "eightshift-ui-components"),
+      availableOn: ["3x3", "2x2"]
+    }
+  ];
+  const sizeOptions = allSizeOptions.filter(({ availableOn }) => availableOn.includes(size));
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      inline: true,
+      children: /* @__PURE__ */ jsx(
+        Menu,
+        {
+          triggerIcon: icons[`position${size}${upperFirst(camelCase(value))}`],
+          triggerProps: { "aria-label": ariaLabel },
+          tooltip,
+          keepOpen: true,
+          children: sizeOptions.map(({ value: itemValue, label: label2 }) => {
+            var _a;
+            return /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                endIcon: (_a = icons) == null ? void 0 : _a[`position${size}${pascalCase(itemValue)}`],
+                selected: value === itemValue,
+                onClick: () => onChange(itemValue),
+                children: label2
+              },
+              itemValue
+            );
+          })
+        }
+      )
+    }
+  );
+};
+export {
+  MatrixAlign
+};