@eightshift/ui-components 5.0.0 → 5.0.1

package/dist/components/index.js

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,231 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input--mF4XVE1.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Fp6AwSRn.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-B94NDG0v.js";
+import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-VO5tcIli.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-nMG2uzxS.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DeUh5Wkw.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-DRpwWot2.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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,30 @@
+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

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