@eightshift/ui-components 3.0.1 → 5.0.0

package/dist/components/index.js

@@ -1,137 +0,0 @@
-import { AnimatedVisibility } from "./animated-visibility/animated-visibility.js";
-import { BaseControl } from "./base-control/base-control.js";
-import { BreakpointPreview } from "./breakpoint-preview/breakpoint-preview.js";
-import { Button, ButtonGroup } from "./button/button.js";
-import { Checkbox } from "./checkbox/checkbox.js";
-import { ComponentToggle } from "./component-toggle/component-toggle.js";
-import { ContainerPanel } from "./container-panel/container-panel.js";
-import { ColorSwatch } from "./color-pickers/color-swatch.js";
-import { ColorPicker } from "./color-pickers/color-picker.js";
-import { ColumnConfigSlider, ColumnConfigSliderOutput } from "./slider/column-config-slider.js";
-import { DraggableList } from "./draggable-list/draggable-list.js";
-import { DraggableListItem, DraggableListItemHandle } from "./draggable-list/draggable-list-item.js";
-import { DraggableContext } from "./draggable/draggable-context.js";
-import { Draggable } from "./draggable/draggable.js";
-import { DraggableHandle } from "./draggable/draggable-handle.js";
-import { Expandable } from "./expandable/expandable.js";
-import { FilePlaceholder } from "./placeholders/file-placeholder.js";
-import { GradientEditor } from "./color-pickers/gradient-editor.js";
-import { HStack } from "./layout/hstack.js";
-import { RichLabel } from "./rich-label/rich-label.js";
-import { InputField } from "./input-field/input-field.js";
-import { ImagePlaceholder } from "./placeholders/image-placeholder.js";
-import { ItemCollection } from "./item-collection/item-collection.js";
-import { LinkInput } from "./link-input/link-input.js";
-import { MatrixAlign } from "./matrix-align/matrix-align.js";
-import { MediaPlaceholder } from "./placeholders/media-placeholder.js";
-import { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from "./menu/menu.js";
-import { MiniResponsive } from "./responsive/mini-responsive.js";
-import { Notice } from "./notice/notice.js";
-import { NumberPicker } from "./number-picker/number-picker.js";
-import { Popover, TriggeredPopover } from "./popover/popover.js";
-import { RadioButton, RadioButtonGroup } from "./radio/radio.js";
-import { Repeater } from "./repeater/repeater.js";
-import { RepeaterItem } from "./repeater/repeater-item.js";
-import { Responsive } from "./responsive/responsive.js";
-import { ResponsiveLegacy } from "./responsive/responsive-legacy.js";
-import { ResponsivePreview } from "./responsive-preview/responsive-preview.js";
-import { AsyncMultiSelect } from "./select/async-multi-select.js";
-import { AsyncSelect } from "./select/async-single-select.js";
-import { __ExperimentalAsyncSelect } from "./select/v2/async-select.js";
-import { __ExperimentalSelect } from "./select/v2/single-select.js";
-import { Modal } from "./modal/modal.js";
-import { MultiSelect } from "./select/multi-select.js";
-import { RSClearIndicator, RSDropdownIndicator, RSMultiValue, RSMultiValueContainer, RSMultiValueLabel, RSMultiValueRemove, RSOption, RSSingleValue } from "./select/react-select-component-wrappers.js";
-import { OptionSelect } from "./option-select/option-select.js";
-import { OptionsPanel, OptionsPanelHeader, OptionsPanelIntro, OptionsPanelSection } from "./options-panel/options-panel.js";
-import { Select } from "./select/single-select.js";
-import { Slider } from "./slider/slider.js";
-import { SolidColorPicker } from "./color-pickers/solid-color-picker.js";
-import { Spacer } from "./spacer/spacer.js";
-import { Tab, TabList, TabPanel, Tabs } from "./tabs/tabs.js";
-import { Toggle } from "./toggle/toggle.js";
-import { Switch } from "./toggle/switch.js";
-import { ToggleButton } from "./toggle-button/toggle-button.js";
-import { DecorativeTooltip, Tooltip } from "./tooltip/tooltip.js";
-import { VStack } from "./layout/vstack.js";
-export {
-  AnimatedVisibility,
-  AsyncMultiSelect,
-  AsyncSelect,
-  BaseControl,
-  BreakpointPreview,
-  Button,
-  ButtonGroup,
-  Checkbox,
-  ColorPicker,
-  ColorSwatch,
-  ColumnConfigSlider,
-  ColumnConfigSliderOutput,
-  ComponentToggle,
-  ContainerPanel,
-  DecorativeTooltip,
-  Draggable,
-  DraggableContext,
-  DraggableHandle,
-  DraggableList,
-  DraggableListItem,
-  DraggableListItemHandle,
-  Expandable,
-  FilePlaceholder,
-  GradientEditor,
-  HStack,
-  ImagePlaceholder,
-  InputField,
-  ItemCollection,
-  LinkInput,
-  MatrixAlign,
-  MediaPlaceholder,
-  Menu,
-  MenuItem,
-  MenuSection,
-  MenuSeparator,
-  MiniResponsive,
-  Modal,
-  MultiSelect,
-  Notice,
-  NumberPicker,
-  OptionSelect,
-  OptionsPanel,
-  OptionsPanelHeader,
-  OptionsPanelIntro,
-  OptionsPanelSection,
-  Popover,
-  RSClearIndicator,
-  RSDropdownIndicator,
-  RSMultiValue,
-  RSMultiValueContainer,
-  RSMultiValueLabel,
-  RSMultiValueRemove,
-  RSOption,
-  RSSingleValue,
-  RadioButton,
-  RadioButtonGroup,
-  Repeater,
-  RepeaterItem,
-  Responsive,
-  ResponsiveLegacy,
-  ResponsivePreview,
-  RichLabel,
-  Select,
-  Slider,
-  SolidColorPicker,
-  Spacer,
-  SubMenuItem,
-  Switch,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs,
-  Toggle,
-  ToggleButton,
-  Tooltip,
-  TriggeredPopover,
-  VStack,
-  __ExperimentalAsyncSelect,
-  __ExperimentalSelect
-};

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

@@ -1,231 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BxpFEIXV.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-icmbmNdI.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DkCSC521.js";
-import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-DwDr6ozG.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CV5l3lf6.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-52GVSGgC.js";
-import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-DVSAPY-K.js";
-import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { BaseControl } from "../base-control/base-control.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
-let $216918bed6669f72$var$filterHoverProps = (props) => {
-  let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
-  return otherProps;
-};
-const $216918bed6669f72$export$f5c9f3c2c4054eec = /* @__PURE__ */ forwardRef(function TextArea(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $216918bed6669f72$export$2dc6166a7e65358c);
-  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
-  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
-    isTextInput: true,
-    autoFocus: props.autoFocus
-  });
-  let isInvalid = !!props["aria-invalid"] && props["aria-invalid"] !== "false";
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: {
-      isHovered,
-      isFocused,
-      isFocusVisible,
-      isDisabled: props.disabled || false,
-      isInvalid
-    },
-    defaultClassName: "react-aria-TextArea"
-  });
-  return /* @__PURE__ */ React__default.createElement("textarea", {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928($216918bed6669f72$var$filterHoverProps(props), focusProps, hoverProps),
-    ...renderProps,
-    ref,
-    "data-focused": isFocused || void 0,
-    "data-disabled": props.disabled || void 0,
-    "data-hovered": isHovered || void 0,
-    "data-focus-visible": isFocusVisible || void 0,
-    "data-invalid": isInvalid || void 0
-  });
-});
-const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
-const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TextField(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
-  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
-  var _props_validationBehavior, _ref;
-  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
-  let inputRef = useRef(null);
-  let [inputContextProps, mergedInputRef] = $64fa3d84918910a7$export$29f1550f4b0d4415({}, inputRef, $3985021b0ad6602f$export$37fb8590cf2c088c);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  let [inputElementType, setInputElementType] = useState("input");
-  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $2d73ec29415bd339$export$712718f7aec83d5({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    inputElementType,
-    label,
-    validationBehavior
-  }, mergedInputRef);
-  let inputOrTextAreaRef = useCallback((el) => {
-    mergedInputRef.current = el;
-    if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
-  }, [
-    mergedInputRef
-  ]);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: {
-      isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid,
-      isReadOnly: props.isReadOnly || false,
-      isRequired: props.isRequired || false
-    },
-    defaultClassName: "react-aria-TextField"
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
-  delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    ...DOMProps,
-    ...renderProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-disabled": props.isDisabled || void 0,
-    "data-invalid": validation.isInvalid || void 0,
-    "data-readonly": props.isReadOnly || void 0,
-    "data-required": props.isRequired || void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $01b77f81d0f07f68$export$75b6ee27786ba447,
-        {
-          ...labelProps,
-          ref: labelRef
-        }
-      ],
-      [
-        $3985021b0ad6602f$export$37fb8590cf2c088c,
-        {
-          ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, inputContextProps),
-          ref: inputOrTextAreaRef
-        }
-      ],
-      [
-        $216918bed6669f72$export$2dc6166a7e65358c,
-        {
-          ...inputProps,
-          ref: inputOrTextAreaRef
-        }
-      ],
-      [
-        $514c0188e459b4c0$export$9afb8bc826b033ea,
-        {
-          slots: {
-            description: descriptionProps,
-            errorMessage: errorMessageProps
-          }
-        }
-      ],
-      [
-        $ee014567cb39d3f0$export$ff05c3ac10437e03,
-        validation
-      ]
-    ]
-  }, renderProps.children));
-});
-/**
- * An input field.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display in the label.
- * @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 {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
- * @param {boolean} [props.inline] - Whether the element menu is displayed inline with the label, to the right of it.
- * @param {string} [props.value] - The current value of the input.
- * @param {Function} [props.onChange] - Function to run when the input value changes.
- * @param {InputType} [props.type='text'] - The input type. Renders a `<textarea>` instead of `<input>` if set to 'multiline'.
- * @param {boolean} [props.disabled] - If `true`, the input is disabled.
- * @param {boolean} [props.readOnly] - If `true`, the input is read-only.
- * @param {string} [props.className] - Classes to pass to the input field.
- * @param {string} [props.wrapperClassName] - Classes to pass to the input field wrapping element.
- * @param {boolean} [props.monospaceFont] - If `true`, the input uses a monospace font. Useful for things like IDs to make them easier to read.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The InputField component.
- *
- * @typedef {'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | 'multiline'} InputType
- *
- * @example
- * <InputField
- * 	label='My input'
- * 	value={inputValue}
- * 	onChange={setInputValue}
- * />
- *
- * @preserve
- */
-const InputField = (props) => {
-  const { icon, label, subtitle, help, actions, inline, value, onChange, type = "text", disabled, readOnly, className, wrapperClassName, hidden, monospaceFont, ...other } = props;
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    $bcdf0525bf22703d$export$2c73285ae9390cec,
-    {
-      value: value ?? "",
-      onChange,
-      isDisabled: disabled,
-      isReadOnly: readOnly,
-      className: wrapperClassName,
-      ...other,
-      children: /* @__PURE__ */ jsxs(
-        BaseControl,
-        {
-          icon,
-          label,
-          subtitle,
-          actions,
-          inline,
-          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-          help,
-          children: [
-            type !== "multiline" && /* @__PURE__ */ jsx(
-              $3985021b0ad6602f$export$f5b8910cec6cf069,
-              {
-                ...other,
-                type,
-                className: clsx(
-                  "es:min-h-10 es:w-full es:rounded-lg es:border es:border-secondary-300 es:p-2 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",
-                  (monospaceFont || type === "password") && "es:font-mono",
-                  className
-                )
-              }
-            ),
-            type === "multiline" && /* @__PURE__ */ jsx(
-              $216918bed6669f72$export$f5c9f3c2c4054eec,
-              {
-                ...other,
-                className: clsx(
-                  "es:min-h-10 es:w-full es:rounded-lg es:border es:border-secondary-300 es:p-2 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",
-                  className
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  InputField
-};

package/dist/components/item-collection/item-collection.js

@@ -1,59 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-/**
- * A simple component to manage a collection of items.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {Object<string, any>[]} props.items - Items to show.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The ItemCollection component.
- *
- * @example
- * <ItemCollection
- *    items={items}
- *    onChange={setItems}
- * >
- *    {({ title, updateData, deleteItem }) => (
- *       <div>
- *          <InputField
- *             label={__('Title', 'demo')}
- *             value={title}
- *             onChange={(title) => updateData({ title })}
- *          />
- *       </div>
- *    )}
- * </ItemCollection>
- *
- * @preserve
- */
-const ItemCollection = (props) => {
-  const { children, items: rawItems, onChange, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
-    console.warn(__("ItemCollection: 'items' are not an array or are undefined!", "eightshift-ui-components"));
-  }
-  const items = rawItems ?? [];
-  return items.map((item, index) => /* @__PURE__ */ jsx(Fragment, { children: children({
-    ...item,
-    updateData: (newValue) => {
-      const updated = [...items];
-      updated[index] = {
-        ...updated[index],
-        ...newValue
-      };
-      onChange(updated);
-    },
-    itemIndex: index,
-    deleteItem: () => {
-      onChange([...items].filter((_, i) => i !== index));
-    }
-  }) }, index));
-};
-export {
-  ItemCollection
-};

package/dist/components/layout/hstack.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-/**
- * Allows for stacking elements horizontally, with a gap between them.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {boolean} [props.noWrap] - If `true`, the children will not wrap if their size exceeds the container size.
- * @param {string} [props.className] - Classes to pass to the component.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The HStack component.
- *
- * @example
- * <HStack>
- * 	...
- * </HStack>
- *
- * @preserve
- */
-const HStack = (props) => {
-  const { children, noWrap, className, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:items-center es:gap-x-1.5 es:gap-y-2", !noWrap && "es:flex-wrap", className), children });
-};
-export {
-  HStack
-};

package/dist/components/layout/vstack.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-/**
- * Allows for stacking elements vertically, with a gap between them.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {boolean} [props.noWrap] - If `true`, the children will not wrap if their size exceeds the container size.
- * @param {string} [props.className] - Classes to pass to the component.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The VStack component.
- *
- * @example
- * <VStack>
- * 	...
- * </VStack>
- *
- * @preserve
- */
-const VStack = (props) => {
-  const { children, noWrap, className, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-x-1.5 es:gap-y-1.5", !noWrap && "es:flex-wrap", className), children });
-};
-export {
-  VStack
-};