@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/select/multi-select.js

@@ -0,0 +1,151 @@
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { S as StateManagedSelect$1 } from "../../react-select.esm-Ciai3aKf.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValueRemove, b as getMultiValue } from "../../multi-select-components-Sp-JEFEX.js";
+import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
+import { CustomSelectDefaultClearIndicator, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultMultiValueRemove } from "./custom-select-default-components.js";
+import { getValue } from "./shared.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { eightshiftSelectClasses } from "./styles.js";
+import { c as components } from "../../index-641ee5b8.esm-BPU8rMZr.js";
+/**
+ * Multi-select menu with re-orderable items.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.label] - Label of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.value - Current value of the select.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
+ * @param {boolean} [props.clearable] - Whether the select is clearable.
+ * @param {boolean} [props.noSearch] - Whether the search is disabled.
+ * @param {boolean} [props.disabled] - Whether the select is disabled.
+ * @param {boolean} [props.keepMenuOpenAfterSelect] - Whether the menu stays open after an select.
+ * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
+ * @param {JSX.Element} [props.customClearIndicator] - If provided, replaces the default 'Clear all' button.
+ * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
+ * @param {JSX.Element} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`.
+ * @param {JSX.Element} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`).
+ * @param {string} [props.className] - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The MultiSelect component.
+ *
+ * @example
+ * const [value, setValue] = useState([]);
+ *
+ * const options = [
+ * 	{ label: 'Option 1', value: 'option-1' },
+ * 	{ label: 'Option 2', value: 'option-2' },
+ * 	{ label: 'Option 3', value: 'option-3' },
+ * ];
+ *
+ * <MultiSelect
+ * 	label='Select items'
+ * 	options={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const MultiSelect = (props) => {
+  const {
+    label,
+    help,
+    icon,
+    subtitle,
+    actions,
+    inline,
+    value: rawValue,
+    onChange,
+    options,
+    simpleValue = false,
+    disabled = false,
+    noSearch = false,
+    clearable = false,
+    keepMenuOpenAfterSelect = false,
+    placeholder,
+    customClearIndicator,
+    customDropdownArrow,
+    customMenuOption,
+    customValueDisplay,
+    customValueRemove,
+    customValueContainer,
+    className,
+    hidden,
+    ...additionalProps
+  } = props;
+  const idBase = useId();
+  const value = getValue(simpleValue, rawValue, options).map((item, index) => ({
+    ...item,
+    id: (simpleValue ? item : item == null ? void 0 : item.value) ?? `${idBase}-${index}`
+  }));
+  const modifiedOnChange = (v) => {
+    if (simpleValue) {
+      onChange(v == null ? void 0 : v.map(({ value: value2 }) => value2));
+      return;
+    }
+    onChange(v == null ? void 0 : v.map((item) => ({ ...item, id: void 0 })));
+  };
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      label,
+      icon,
+      subtitle,
+      actions,
+      help,
+      inline,
+      children: /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          modifiers: [restrictToParentElement],
+          onDragEnd: getDragEndHandler(modifiedOnChange, value),
+          children: /* @__PURE__ */ jsx(SortableContext, { items: value.map(({ id }) => id), children: /* @__PURE__ */ jsx(
+            StateManagedSelect$1,
+            {
+              isMulti: true,
+              unstyled: true,
+              options: options.map((item) => ({ id: item.value, ...item })),
+              value,
+              onChange: modifiedOnChange,
+              closeMenuOnSelect: !keepMenuOpenAfterSelect,
+              isClearable: clearable,
+              isSearchable: !noSearch,
+              isDisabled: disabled,
+              className,
+              placeholder,
+              classNames: eightshiftSelectClasses,
+              components: {
+                MultiValue: getMultiValue(customValueDisplay ?? components.MultiValue),
+                MultiValueContainer: customValueContainer ?? components.MultiValueContainer,
+                MultiValueRemove: getMultiValueRemove(customValueRemove ?? CustomSelectDefaultMultiValueRemove),
+                Option: customMenuOption ?? components.Option,
+                IndicatorSeparator: null,
+                DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
+                ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
+              },
+              menuPortalTarget: document.body,
+              ...additionalProps
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+export {
+  MultiSelect
+};

package/dist/components/select/react-select-component-wrappers.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { c as components } from "../../index-641ee5b8.esm-BPU8rMZr.js";
+/**
+ * Custom dropdown indicator for CustomSelect.
+ *
+ * (a wrapper for `components.DropdownIndicator` from `react-select`)
+ *
+ * @param {import('react-select').DropdownIndicatorProps} props - components.DropdownIndicator props.
+ *
+ * @preserve
+ */
+const RSDropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props });
+/**
+ * Custom value display for CustomSelect.
+ *
+ * (a wrapper for `components.SingleValue` from `react-select`)
+ *
+ * @param {import('react-select').SingleValueProps} props - components.SingleValue props.
+ *
+ * @preserve
+ */
+const RSSingleValue = (props) => /* @__PURE__ */ jsx(components.SingleValue, { ...props });
+/**
+ * Custom value display for multi item select.
+ *
+ * (a wrapper for `components.MultiValue` from `react-select`)
+ *
+ * @param {import('react-select').MultiValueProps} props - components.SingleValue props.
+ *
+ * @preserve
+ */
+const RSMultiValue = (props) => /* @__PURE__ */ jsx(components.MultiValue, { ...props });
+/**
+ * Custom option for CustomSelect.
+ *
+ * (a wrapper for `components.Option` from `react-select`)
+ *
+ * @param {import('react-select').OptionProps} props - components.Option props.
+ *
+ * @preserve
+ */
+const RSOption = (props) => /* @__PURE__ */ jsx(components.Option, { ...props });
+/**
+ * Custom multiple value remove button for CustomSelect.
+ *
+ * (a wrapper for `components.MultiValueRemove` from `react-select`)
+ *
+ * @param {import('react-select').MultiValueRemoveProps} props - components.MultiValueRemove props.
+ *
+ * @preserve
+ */
+const RSMultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props });
+/**
+ * Custom multiple value display container for CustomSelect.
+ *
+ * (a wrapper for `components.MultiValueContainer` from `react-select`)
+ *
+ * @param {import('react-select').MultiValueGenericProps} props - components.MultiValueContainer props.
+ *
+ * @preserve
+ */
+const RSMultiValueContainer = (props) => /* @__PURE__ */ jsx(components.MultiValueContainer, { ...props });
+/**
+ * Custom multiple value display for CustomSelect.
+ *
+ * (a wrapper for `components.MultiValueLabel` from `react-select`)
+ *
+ * @param {import('react-select').MultiValueGenericProps} props - components.MultiValueLabel props.
+ *
+ * @preserve
+ */
+const RSMultiValueLabel = (props) => /* @__PURE__ */ jsx(components.MultiValueLabel, { ...props });
+/**
+ * Default clear indicator for CustomSelect.
+ *
+ * @param {import('react-select').ClearIndicatorProps} props - components.ClearIndicator props.
+ *
+ * @preserve
+ */
+const RSClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props });
+export {
+  RSClearIndicator,
+  RSDropdownIndicator,
+  RSMultiValue,
+  RSMultiValueContainer,
+  RSMultiValueLabel,
+  RSMultiValueRemove,
+  RSOption,
+  RSSingleValue
+};

package/dist/components/select/shared.js

@@ -0,0 +1,26 @@
+/**
+ * Handles getting the current value.
+ *
+ * @param {boolean} simpleValue - Whether `simpleValue` is set.
+ * @param {string|{label: string, value: string, metadata: Object<string, any>[]}} value - Current value.
+ * @param {{label: string, value: string}[]} options - Options passed to the component.
+ *
+ * @returns Appropriate output for the given input combination.
+ *
+ * @preserve
+ */
+const getValue = (simpleValue, value, options) => {
+  if (Array.isArray(value)) {
+    if (simpleValue) {
+      return value.map((value2) => options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value2));
+    }
+    return value;
+  }
+  if (simpleValue) {
+    return options == null ? void 0 : options.find(({ value: itemValue }) => itemValue === value);
+  }
+  return value;
+};
+export {
+  getValue
+};

package/dist/components/select/single-select.js

@@ -0,0 +1,131 @@
+import { jsx } from "react/jsx-runtime";
+import { S as StateManagedSelect$1 } from "../../react-select.esm-Ciai3aKf.js";
+import { CustomSelectDefaultClearIndicator, CustomSelectDefaultDropdownIndicator } from "./custom-select-default-components.js";
+import { getValue } from "./shared.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { eightshiftSelectClasses } from "./styles.js";
+import { c as components } from "../../index-641ee5b8.esm-BPU8rMZr.js";
+/**
+ * Select menu.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.label] - Label of the component.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
+ * @param {string|{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
+ * @param {boolean} [props.clearable] - Whether the select is clearable.
+ * @param {boolean} [props.noSearch] - Whether the search is disabled.
+ * @param {boolean} [props.disabled] - Whether the select is disabled.
+ * @param {boolean} [props.keepMenuOpenAfterSelect] - Whether the menu stays open after an select.
+ * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
+ * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
+ * @param {JSX.Element} [props.customClearIndicator] - If provided, replaces the default 'Clear all' button.
+ * @param {string} [props.className] - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The Select component.
+ *
+ * @example
+ * const [value, setValue] = useState(null);
+ *
+ * const options = [
+ * 	{ label: 'Option 1', value: 'option-1' },
+ * 	{ label: 'Option 2', value: 'option-2' },
+ * 	{ label: 'Option 3', value: 'option-3' },
+ * ];
+ *
+ * <MultiSelect
+ * 	label='Select items'
+ * 	options={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const Select = (props) => {
+  const {
+    icon,
+    help,
+    label,
+    inline,
+    actions,
+    subtitle,
+    value,
+    onChange,
+    options,
+    simpleValue = false,
+    disabled = false,
+    noSearch = false,
+    clearable = false,
+    keepMenuOpenAfterSelect = false,
+    placeholder,
+    customMenuOption,
+    customValueDisplay,
+    customDropdownArrow,
+    customClearIndicator,
+    className,
+    hidden,
+    ...additionalProps
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      label,
+      icon,
+      subtitle,
+      actions,
+      help,
+      inline,
+      children: /* @__PURE__ */ jsx(
+        StateManagedSelect$1,
+        {
+          unstyled: true,
+          options,
+          value: getValue(simpleValue, value, options),
+          onChange: (v) => {
+            if (simpleValue) {
+              onChange(v == null ? void 0 : v.value);
+              return;
+            }
+            if (v && "id" in v) {
+              delete v.id;
+            }
+            onChange(v);
+          },
+          closeMenuOnSelect: !keepMenuOpenAfterSelect,
+          isClearable: clearable,
+          isSearchable: !noSearch,
+          isDisabled: disabled,
+          className,
+          placeholder,
+          classNames: eightshiftSelectClasses,
+          components: {
+            Option: customMenuOption ?? components.Option,
+            SingleValue: customValueDisplay ?? components.SingleValue,
+            IndicatorSeparator: null,
+            DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
+            ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
+          },
+          menuPortalTarget: document.body,
+          ...additionalProps
+        }
+      )
+    }
+  );
+};
+export {
+  Select
+};

package/dist/components/select/styles.js

@@ -0,0 +1,49 @@
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+const controlStyles = {
+  base: "es:border es:border-gray-300 es:rounded-lg es:bg-white es:text-sm es:transition es:group es:shadow-xs es:min-h-10! es:inset-ring es:inset-ring-secondary-100",
+  focus: "es:ring-2 es:ring-accent-500/50 es:border-accent-500!"
+};
+const placeholderStyles = "es:text-gray-400 es:ml-1";
+const selectInputStyles = "es:any-focus:outline-hidden es:[&_input]:shadow-none! es:[&_input:focus]:shadow-none!";
+const valueContainerStyles = "es:gap-1 es:ml-1 es:my-1 es:overflow-visible!";
+const singleValueStyles = "es:ml-0.5 es:px-1";
+const multiValueStyles = clsx(
+  "es:bg-gray-100 es:rounded-md es:py-1 es:px-1.5 es:border es:border-gray-100 hover:border-gray-300 es:items-center es:gap-1.5 es:transition es:overflow-visible es:max-w-40",
+  "es:in-focus-visible:outline-hidden es:in-focus-visible:ring",
+  "es:in-focus-visible:ring-accent-500/50"
+);
+const multiValueLabelStyles = "es:select-none";
+const multiValueRemoveStyles = "es:hover:bg-red-500/15 es:hover:text-red-900 es:text-gray-500 es:rounded es:p-0.5 es:icon:size-3.5 es:icon:stroke-[1.5] es:transition";
+const clearIndicatorStyles = "es:text-gray-500 es:p-1 es:rounded-md hover:bg-red-50 hover:text-red-800 es:transition";
+const dropdownIndicatorStyles = "es:text-gray-500 es:px-1 es:group-hover:text-black es:icon:transition-transform es:icon:duration-500 es:icon:size-5.5";
+const menuStyles = "es:rounded-lg es:border es:border-gray-200 es:bg-white es:shadow-lg es:mt-1 es:text-sm es:overflow-x-hidden es:min-w-48";
+const optionStyles = {
+  base: "es:p-2 es:flex! es:items-center es:gap-1.5 es:text-gray-800 es:rounded-md es:icon:size-5 es:icon:text-gray-500 es:transition es:mx-1 es:first:mt-1 es:last:mb-1 es:w-auto! es:min-h-9",
+  focus: "es:bg-gray-100 es:active:bg-accent-700/15",
+  selected: "es:bg-accent-600/15 es:text-accent-950"
+};
+const noOptionsMessageStyles = "es:text-gray-400 es:p-4";
+const groupHeadingStyles = "es:ml-3 es:mt-3 es:mb-1 es:text-gray-500/80 es:empty:hidden";
+const groupStyles = "es:border-b es:border-b-gray-200 es:last:border-b-0";
+const loadingMessageStyles = "es:p-4";
+const eightshiftSelectClasses = {
+  clearIndicator: () => clearIndicatorStyles,
+  control: ({ isFocused }) => clsx(isFocused && controlStyles.focus, controlStyles.base),
+  dropdownIndicator: () => dropdownIndicatorStyles,
+  group: () => groupStyles,
+  groupHeading: () => groupHeadingStyles,
+  input: () => selectInputStyles,
+  menu: () => menuStyles,
+  multiValue: () => multiValueStyles,
+  multiValueLabel: () => multiValueLabelStyles,
+  multiValueRemove: () => multiValueRemoveStyles,
+  noOptionsMessage: () => noOptionsMessageStyles,
+  option: ({ isFocused, isSelected }) => clsx(isFocused && optionStyles.focus, isSelected && optionStyles.selected, optionStyles.base),
+  placeholder: () => placeholderStyles,
+  singleValue: () => singleValueStyles,
+  valueContainer: () => valueContainerStyles,
+  loadingMessage: () => loadingMessageStyles
+};
+export {
+  eightshiftSelectClasses
+};