@eightshift/ui-components 4.0.0 → 5.0.0

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

@@ -1,293 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-CvzGKGCo.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-jQ-dk95U.js";
-import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-_emcIVxI.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BxpFEIXV.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-icmbmNdI.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-mJ4nQaL7.js";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-DX1aiYyE.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 < 4 || 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: canShowSuggestions && shouldShowSuggestions,
-      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-t-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: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",
-                        !suggestionList.isLoading && "es:aria-[expanded=false]:rounded-b-lg",
-                        suggestionList.isLoading && "es:rounded-b-lg",
-                        (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 && !suggestionList.isLoading && /* @__PURE__ */ jsxs(
-          $07b14b47974efb58$export$5b6b19405a83ff9d,
-          {
-            "aria-label": __("URL suggestions", "eightshift-ui-components"),
-            className: ({ isEntering, isExiting }) => clsx(
-              "es:rounded-b-lg es:border es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden",
-              isEntering && "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",
-              !shouldShowSuggestions && suggestionList.items.length < 1 && "es:invisible"
-            ),
-            offset: -2,
-            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.isLoading && suggestionList.items.length > 0 && /* @__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

@@ -1,134 +0,0 @@
-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
-};