@eightshift/ui-components 4.0.0 → 5.0.0

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

@@ -1,151 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useId } from "react";
-import { S as StateManagedSelect$1 } from "../../react-select.esm-DcwYxadV.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValueRemove, b as getMultiValue } from "../../multi-select-components-BlZZoNXC.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-BPz6U6sJ.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

@@ -1,90 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { c as components } from "../../index-641ee5b8.esm-BPz6U6sJ.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

@@ -1,26 +0,0 @@
-/**
- * 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

@@ -1,131 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { S as StateManagedSelect$1 } from "../../react-select.esm-DcwYxadV.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-BPz6U6sJ.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

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