@ultraviolet/ui 3.0.0-beta.25 → 3.0.0-beta.27

package/dist/components/SearchInput/KeyGroup.cjs

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const index$1 = require("../Key/index.cjs");
-const index = require("../Stack/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const KeyGroup = ({
-  keys,
-  disabled,
-  onClick
-}) => /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { className: styles_css.clickableStack, direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(index$1.Key, { "data-testid": `key-${key}`, disabled, children: key }, key)) });
-exports.KeyGroup = KeyGroup;

package/dist/components/SearchInput/index.cjs

@@ -1,186 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Icon = require("@ultraviolet/icons");
-const react = require("react");
-const isClientSide = require("../../helpers/isClientSide.cjs");
-const index = require("../Popup/index.cjs");
-const index$2 = require("../Stack/index.cjs");
-const index$1 = require("../TextInput/index.cjs");
-const KeyGroup = require("./KeyGroup.cjs");
-const styles_css = require("./styles.css.cjs");
-const SearchInput = react.forwardRef(({
-  placeholder,
-  label,
-  labelDescription,
-  loading,
-  size,
-  popupPlacement,
-  threshold = 0,
-  children,
-  onSearch,
-  onClose,
-  "data-testid": dataTestId,
-  shortcut = false,
-  error,
-  defaultValue = "",
-  disabled,
-  className,
-  minLength,
-  maxLength,
-  tooltip,
-  onFocus,
-  onBlur,
-  name,
-  id,
-  "aria-live": ariaLive,
-  "aria-atomic": ariaAtomic,
-  "aria-labelledby": ariaLabelledby,
-  readOnly,
-  required,
-  autoFocus,
-  autoComplete,
-  onKeyDown,
-  role,
-  value,
-  style
-}, ref) => {
-  const focusedLinkIndex = react.useRef(0);
-  const popupRef = react.useRef(null);
-  const [containerWidth, setContainerWidth] = react.useState(0);
-  const [searchTerms, setSearchTerms] = react.useState(defaultValue);
-  const [isMacOS, setIsMacOS] = react.useState(false);
-  const [keyPressed, setKeyPressed] = react.useState([]);
-  const [isOpen, toggleIsOpen] = react.useReducer((state) => !state, false);
-  const innerSearchInputRef = react.useRef(null);
-  react.useImperativeHandle(ref, () => innerSearchInputRef.current);
-  const content = typeof children === "function" ? children({
-    isOpen,
-    searchTerms,
-    toggleIsOpen
-  }) : children;
-  const resizeSearchBar = () => {
-    if (popupRef.current) {
-      setContainerWidth(popupRef.current.getBoundingClientRect().width);
-    }
-  };
-  const handleNavigation = (event) => {
-    const links = [...popupRef.current?.querySelectorAll("a") ?? []];
-    if (links.length > 0 && focusedLinkIndex.current >= 0 && focusedLinkIndex.current <= links.length) {
-      if (event.key === "ArrowUp") {
-        if (focusedLinkIndex.current - 1 < 0) {
-          focusedLinkIndex.current = links.length - 1;
-        } else {
-          focusedLinkIndex.current -= 1;
-        }
-        links[focusedLinkIndex.current]?.focus();
-      }
-      if (event.key === "ArrowDown") {
-        if (focusedLinkIndex.current + 1 >= links.length) {
-          focusedLinkIndex.current = 0;
-        } else {
-          focusedLinkIndex.current += 1;
-        }
-        links[focusedLinkIndex.current]?.focus();
-      }
-    }
-  };
-  react.useEffect(() => {
-    document.addEventListener("keyup", handleNavigation);
-    return () => document.removeEventListener("keyup", handleNavigation);
-  }, []);
-  react.useEffect(() => {
-    resizeSearchBar();
-    window.addEventListener("resize", resizeSearchBar);
-    return () => window.removeEventListener("resize", resizeSearchBar);
-  }, []);
-  react.useEffect(() => {
-    if (value !== void 0) {
-      setSearchTerms(value);
-    }
-  }, [value]);
-  const onSearchCallback = (localValue) => {
-    setSearchTerms(localValue);
-    try {
-      onSearch(localValue);
-      if (localValue.length >= threshold && !isOpen) {
-        toggleIsOpen();
-      }
-    } catch {
-      toggleIsOpen();
-    }
-  };
-  const onCloseCallback = () => {
-    onClose?.();
-    if (isOpen) {
-      toggleIsOpen();
-    }
-  };
-  react.useEffect(() => {
-    if (isClientSide.isClientSide) {
-      setIsMacOS(navigator.userAgent.includes("Mac"));
-    }
-  }, []);
-  const handleKeyPressed = react.useCallback((event) => {
-    if (!(event instanceof KeyboardEvent)) {
-      return;
-    }
-    const {
-      ctrlKey,
-      metaKey,
-      key
-    } = event;
-    setKeyPressed([...keyPressed, key.toUpperCase()]);
-    if (typeof shortcut === "boolean") {
-      if ((key === "k" || key === "K") && (!isMacOS && ctrlKey || isMacOS && metaKey)) {
-        event.preventDefault();
-        innerSearchInputRef.current?.focus();
-      }
-    } else {
-      const uppercaseShortcut = shortcut.map((s) => s.toUpperCase());
-      if (JSON.stringify([...keyPressed, key.toUpperCase()]) === JSON.stringify(uppercaseShortcut)) {
-        event.preventDefault();
-        innerSearchInputRef.current?.focus();
-      }
-    }
-  }, [keyPressed, shortcut, isMacOS]);
-  const handleKeyReleased = react.useCallback((event) => {
-    if (!(event instanceof KeyboardEvent)) {
-      return;
-    }
-    const {
-      key
-    } = event;
-    setKeyPressed(keyPressed.filter((k) => k !== key.toUpperCase()));
-  }, [keyPressed]);
-  react.useEffect(() => {
-    if (shortcut && !disabled) {
-      document.body.addEventListener("keydown", handleKeyPressed);
-      document.body.addEventListener("keyup", handleKeyReleased);
-    }
-    return () => {
-      document.body.removeEventListener("keydown", handleKeyPressed);
-      document.body.removeEventListener("keyup", handleKeyReleased);
-    };
-  }, [shortcut, disabled, handleKeyPressed, handleKeyReleased]);
-  const keys = react.useMemo(() => {
-    if (typeof shortcut === "boolean") {
-      return [isMacOS ? "⌘" : "Ctrl", "K"];
-    }
-    const filteredKey = shortcut.map((key) => {
-      if (key === "Meta") {
-        return "⌘";
-      }
-      if (key === "Control") {
-        return "Ctrl";
-      }
-      return key;
-    });
-    return filteredKey;
-  }, [isMacOS, shortcut]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-    width: "100%"
-  }, children: /* @__PURE__ */ jsxRuntime.jsx(index.Popup, { className: styles_css.searchInputPopup, "data-testid": `popup-${dataTestId}`, debounceDelay: 0, hasArrow: false, hideOnClickOutside: true, innerRef: popupRef, maxHeight: 410, maxWidth: containerWidth, onClose: onCloseCallback, placement: popupPlacement, role: "dialog", text: content, visible: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.TextInput, { "aria-atomic": ariaAtomic, "aria-labelledby": ariaLabelledby, "aria-live": ariaLive, autoComplete, autoFocus, className: `${className ? `${className} ` : ""}${styles_css.searchInput}`, clearable: true, "data-testid": dataTestId, disabled, error, id, label, labelDescription, loading, maxLength, minLength, name, onBlur, onChange: (event) => onSearchCallback(event.target.value), onFocus, onKeyDown, placeholder, prefix: /* @__PURE__ */ jsxRuntime.jsx(index$2.Stack, { className: styles_css.clickableStack, "data-testid": `search-icon${dataTestId ? `-${dataTestId}` : ""}`, onClick: () => innerSearchInputRef.current?.focus(), children: /* @__PURE__ */ jsxRuntime.jsx(Icon.SearchIcon, { disabled, sentiment: "neutral" }) }), readOnly, ref: innerSearchInputRef, required, role, size, style, suffix: shortcut && searchTerms.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(KeyGroup.KeyGroup, { disabled, keys, onClick: () => innerSearchInputRef.current?.focus() }) : void 0, tooltip, value: searchTerms }) }) });
-});
-exports.SearchInput = SearchInput;

package/dist/components/SearchInput/styles.css.cjs

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                       */
-;/* empty css                            */
-var searchInputPopup = "uv_r3pe3n0";
-var searchInput = "uv_r3pe3n1";
-var clickableStack = "uv_r3pe3n2";
-exports.clickableStack = clickableStack;
-exports.searchInput = searchInput;
-exports.searchInputPopup = searchInputPopup;

package/dist/components/SelectInput/SelectInputProvider.cjs

@@ -1,203 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const SelectInputContext = react.createContext({
-  displayedOptions: [],
-  isDropdownVisible: false,
-  multiselect: false,
-  numberOfOptions: 0,
-  onChange: () => {
-  },
-  onSearch: () => {
-  },
-  options: [],
-  searchInput: "",
-  selectAll: {
-    label: ""
-  },
-  selectAllGroup: false,
-  selectedData: {
-    allSelected: false,
-    selectedGroups: [],
-    selectedValues: []
-  },
-  setIsDropdownVisible: () => {
-  },
-  setSearchInput: () => {
-  },
-  setSelectedData: () => {
-  }
-});
-const useSelectInput = () => react.useContext(SelectInputContext);
-const SelectInputProvider = ({
-  options,
-  multiselect,
-  selectAll,
-  value,
-  selectAllGroup,
-  numberOfOptions,
-  children,
-  onChange,
-  refSelect,
-  onOpen
-}) => {
-  const currentValue = react.useMemo(() => {
-    if (value) {
-      if (Array.isArray(value)) {
-        return value;
-      }
-      return [value];
-    }
-    return [];
-  }, [value]);
-  const selectedGroups = react.useMemo(() => {
-    if (Array.isArray(options)) {
-      return [];
-    }
-    return Object.keys(options).filter((group) => options[group].every((groupOption) => currentValue.includes(groupOption.value)));
-  }, [currentValue, options]);
-  const [displayedOptions, setDisplayedOptions] = react.useState(options);
-  const [isDropdownVisible, setIsDropdownVisible] = react.useState(false);
-  const [searchInput, setSearchInput] = react.useState("");
-  const handleDropDownVisible = react.useCallback((newValue) => {
-    setIsDropdownVisible(newValue);
-    if (newValue) {
-      onOpen?.();
-    }
-    if (!newValue && refSelect) {
-      refSelect.current?.focus();
-    }
-  }, [refSelect, onOpen]);
-  const allValues = react.useMemo(() => {
-    if (!Array.isArray(options)) {
-      return Object.keys(options).flatMap((group) => options[group].filter((option) => !option.disabled));
-    }
-    return options;
-  }, [options]);
-  const allGroups = react.useMemo(() => {
-    if (!Array.isArray(options)) {
-      return Object.keys(options);
-    }
-    return [];
-  }, [options]);
-  const reducer = (state, action) => {
-    switch (action.type) {
-      case "selectAll": {
-        if (state.allSelected) {
-          return {
-            allSelected: false,
-            selectedGroups: [],
-            selectedValues: []
-          };
-        }
-        return {
-          allSelected: true,
-          selectedGroups: allGroups,
-          selectedValues: allValues.map((option) => option.value)
-        };
-      }
-      case "selectGroup": {
-        if (!Array.isArray(options)) {
-          if (state.selectedGroups.includes(action.selectedGroup)) {
-            return {
-              allSelected: false,
-              selectedGroups: state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.selectedGroup),
-              selectedValues: [...state.selectedValues].filter((selectedValue) => !options[action.selectedGroup].find((option) => option.value === selectedValue))
-            };
-          }
-          const newSelectedValues = [...state.selectedValues];
-          options[action.selectedGroup].map((option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
-          return {
-            allSelected: newSelectedValues.length === numberOfOptions,
-            selectedGroups: [...state.selectedGroups, action.selectedGroup],
-            selectedValues: newSelectedValues
-          };
-        }
-        return state;
-      }
-      case "selectOption": {
-        if (multiselect) {
-          if (state.selectedValues.includes(action.clickedOption.value)) {
-            return {
-              allSelected: false,
-              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.group) : [],
-              selectedValues: state.selectedValues.filter((val) => val !== action.clickedOption.value)
-            };
-          }
-          return {
-            allSelected: state.selectedValues.length + 1 === numberOfOptions,
-            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every((option) => [...state.selectedValues, action.clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups,
-            selectedValues: [...state.selectedValues, action.clickedOption.value]
-          };
-        }
-        return {
-          allSelected: false,
-          selectedGroups: state.selectedGroups,
-          selectedValues: [action.clickedOption.value]
-        };
-      }
-      case "clearAll": {
-        return {
-          allSelected: false,
-          selectedGroups: [],
-          selectedValues: []
-        };
-      }
-      case "update": {
-        return {
-          allSelected: state.allSelected,
-          selectedGroups: state.selectedGroups,
-          selectedValues: state.selectedValues.filter((selectedValue) => {
-            if (!Array.isArray(options)) {
-              return Object.keys(options).some((group) => options[group].some((option) => option.value === selectedValue && !option.disabled));
-            }
-            return options.some((option) => option.value === selectedValue && !option.disabled);
-          })
-        };
-      }
-      case "reset": {
-        return {
-          allSelected: false,
-          selectedGroups: action.selectedGroups,
-          selectedValues: action.selectedValues
-        };
-      }
-      default: {
-        return state;
-      }
-    }
-  };
-  const [selectedData, setSelectedData] = react.useReducer(reducer, {
-    allSelected: false,
-    selectedGroups,
-    selectedValues: currentValue
-  });
-  react.useEffect(() => {
-    setSelectedData({
-      selectedGroups,
-      selectedValues: currentValue,
-      type: "reset"
-    });
-  }, [currentValue, selectedGroups]);
-  const providerValue = react.useMemo(() => ({
-    displayedOptions,
-    isDropdownVisible,
-    multiselect,
-    numberOfOptions,
-    onChange,
-    onSearch: setDisplayedOptions,
-    options,
-    searchInput,
-    selectAll,
-    selectAllGroup,
-    selectedData,
-    setIsDropdownVisible: handleDropDownVisible,
-    setSearchInput,
-    setSelectedData
-  }), [isDropdownVisible, handleDropDownVisible, searchInput, options, multiselect, selectAll, selectAllGroup, numberOfOptions, displayedOptions, selectedData, onChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectInputContext.Provider, { value: providerValue, children });
-};
-exports.SelectInputProvider = SelectInputProvider;
-exports.useSelectInput = useSelectInput;