@eightshift/ui-components 0.0.1

package/dist/components/list-box/list-box.js

@@ -0,0 +1,152 @@
+import { jsx } from "react/jsx-runtime";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-w9gDaJkV.js";
+import { classnames } from "../../utilities/classnames.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+/**
+ * A component that allows selecting a single or multiple options from a list.
+ *
+ * @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 {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the header.
+ * @param {string} [props.help] - Help text to display below the list.
+ * @param {boolean} [props.inline] - If `true`, the list is displayed inline with the label.
+ * @param {Object[]} props.options - The list of options to display.
+ * @param {string} props.options[].value - The value of the option. Should be unique!
+ * @param {string} [props.options[].label] - The label of the option.
+ * @param {JSX.Element} [props.options[].icon] - The icon of the option.
+ * @param {string} [props.options[].subtitle] - The subtitle of the option.
+ * @param {string} [props.options[].tooltip] - The tooltip text of the option.
+ * @param {boolean} [props.options[].disabled] - If `true`, the option is cannot be selected.
+ * @param {ListBoxSelectionMode} [props.selectionMode='single'] - The selection mode.
+ * @param {string} props.value - The currently selected value.
+ * @param {Function} props.onChange - Function to run when the selection changes.
+ * @param {boolean} [props.canDeselect=false] - If `true`, the selected value can be deselected (`null` is set in that case).
+ * @param {ListBoxOrientation} [props.orientation='horizontal'] - The orientation of the list. If all options have only an icon set, the orientation is forced to be horizontal.
+ * @param {string} [props.className] - Classes to pass to the list.
+ *
+ * @returns {JSX.Element} The ListBox component.
+ *
+ * @typedef {'single' | 'multiple'} ListBoxSelectionMode
+ * @typedef {'horizontal' | 'vertical' | 'horizontal-tiles'} ListBoxOrientation
+ *
+ * @example
+ * <ListBox
+ * 	label='My list'
+ * 	options={[
+ * 		{ value: 'option1', label: 'Option 1' },
+ * 		{ value: 'option2', label: 'Option 2' },
+ * 	]}
+ * 	value={selectedValue}
+ * 	onChange={setSelectedValue}
+ * />
+ *
+ * @preserve
+ */
+const ListBox = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    actions,
+    help,
+    inline,
+    options,
+    "aria-label": ariaLabel,
+    selectionMode = "single",
+    value,
+    onChange,
+    canDeselect = false,
+    orientation: setOrientation = "horizontal",
+    className,
+    ...rest
+  } = props;
+  const mappedOptions = options.map((option) => ({
+    ...option,
+    id: option.id ?? option.value
+  }));
+  let orientation = setOrientation;
+  if (options.every(({ icon: icon2, label: label2, subtitle: subtitle2 }) => icon2 && !label2 && !subtitle2)) {
+    orientation = "horizontal";
+  }
+  let orientationPropValue = orientation;
+  if (orientation === "horizontal-tiles") {
+    orientationPropValue = "horizontal";
+  }
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      actions,
+      inline,
+      help,
+      children: /* @__PURE__ */ jsx(
+        $eed445e0843c11d0$export$41f133550aa26f48,
+        {
+          selectionMode,
+          className: classnames(
+            "es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-p-1 es-uic-text-sm es-uic-shadow-sm es-uic-transition",
+            "focus:es-uic-outline-none",
+            orientation === "horizontal" && "es-uic-flex es-uic-w-fit es-uic-max-w-full es-uic-gap-0.5",
+            orientation === "vertical" && "es-uic-flex es-uic-flex-col es-uic-gap-0.5",
+            orientation === "horizontal-tiles" && "es-uic-grid es-uic-min-h-20 es-uic-w-fit es-uic-max-w-full es-uic-auto-cols-[fit-content(6rem)] es-uic-grid-rows-[1fr,_minmax(auto,_0.5fr),_auto] es-uic-gap-x-0.5",
+            className
+          ),
+          "aria-label": ariaLabel ?? __("Choose", "eightshift-ui-components"),
+          items: mappedOptions,
+          disallowEmptySelection: !canDeselect,
+          orientation: orientationPropValue,
+          selectedKeys: [value],
+          onSelectionChange: (key) => {
+            onChange((key == null ? void 0 : key.currentKey) ?? (key == null ? void 0 : key.anchorKey));
+          },
+          ...rest,
+          children: (item) => {
+            const { label: label2, icon: icon2, subtitle: subtitle2, tooltip, disabled } = item;
+            return /* @__PURE__ */ jsx(
+              $eed445e0843c11d0$export$a11e76429ed99b4,
+              {
+                textValue: label2 ?? tooltip,
+                isDisabled: disabled,
+                className: ({ isDisabled, isSelected }) => {
+                  return classnames(
+                    "es-uic-flex es-uic-min-h-9 es-uic-select-none es-uic-rounded-md es-uic-border es-uic-transition",
+                    "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+                    isSelected && !disabled && "es-uic-bg-teal-600 es-uic-text-white es-uic-border-teal-600 after:es-uic-opacity-45 es-uic-border es-uic-shadow-md es-uic-shadow-teal-500/25",
+                    isSelected && !disabled && "es-uic-text-white [&_svg]:es-uic-text-white [&_span]:es-uic-text-white [&_span_+_span]:es-uic-text-white/80",
+                    isSelected && !disabled && 'es-uic-relative es-uic-isolate after:es-uic-absolute after:es-uic-inset-0 after:-es-uic-z-10 after:es-uic-rounded-[0.3125rem] after:es-uic-bg-gradient-to-br after:es-uic-from-teal-100/40 after:es-uic-via-transparent after:es-uic-to-teal-200/50 after:es-uic-opacity-0 after:es-uic-transition-opacity after:es-uic-content-[""]',
+                    !isSelected && !disabled && "es-uic-border-transparent hover:es-uic-bg-gray-100",
+                    isDisabled && "es-uic-border-transparent es-uic-opacity-30 es-uic-grayscale",
+                    orientation !== "horizontal-tiles" && "es-uic-px-2 es-uic-py-1.5",
+                    icon2 && !label2 && !subtitle2 && "es-uic-size-9 !es-uic-p-1.5",
+                    orientation === "horizontal-tiles" && "es-uic-row-start-1 es-uic-row-end-4 es-uic-grid es-uic-min-w-18 es-uic-grid-rows-subgrid es-uic-items-center es-uic-justify-items-center es-uic-p-1.5 es-uic-text-center es-uic-leading-tight",
+                    orientation === "horizontal-tiles" && subtitle2 && "[&_svg]:es-uic-mb-1"
+                  );
+                },
+                children: /* @__PURE__ */ jsx(
+                  RichLabel,
+                  {
+                    icon: icon2,
+                    label: label2,
+                    subtitle: subtitle2,
+                    className: classnames(orientation === "horizontal" && "leading-none"),
+                    contentsOnly: orientation === "horizontal-tiles"
+                  }
+                )
+              }
+            );
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  ListBox
+};

package/dist/components/matrix-align/matrix-align.js

@@ -0,0 +1,185 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { P as Popover } from "../../popover-Dx3vKXUX.js";
+import { B as Button } from "../../button-BkkdyHfJ.js";
+import { icons } from "../../icons/icons.js";
+import { upperFirst, camelCase } from "../../utilities/text-helpers.js";
+import { classnames } from "../../utilities/classnames.js";
+import { T as Tooltip } from "../../tooltip-CkCndvTI.js";
+import { BaseControl } from "../base-control/base-control.js";
+/**
+ * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.
+ * Replaces the default Gutenberg `AlignmentMatrixControl`/`BlockAlignmentMatrixControl`/`BlockAlignmentMatrixToolbar`.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {MatrixSize} [props.size='3x3'] - The size of the matrix. Can be either '3x3' or '2x2'.
+ * @param {string} props.value - The currently selected value.
+ * @param {Function} props.onChange - Function to run when the selection changes.
+ * @param {string} [props.tooltip='Position'] - Tooltip text to display on the trigger button.
+ * @param {string} [props.label] - Label to display.
+ * @param {JSX.Element} [props.icon] - Icon to display within the button.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {string} [props.popoverPosition='bottom'] - The position of the popover.
+ *
+ * @returns {JSX.Element} The MatrixAlign component.
+ *
+ * @typedef {'3x3' | '2x2'} MatrixSize
+ * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPosition
+ *
+ * @example
+ * <MatrixAlign
+ * 		size='3x3'
+ * 		value='top left'
+ * 		onChange={setAlignment}
+ * />
+ *
+ * @preserve
+ */
+const MatrixAlign = (props) => {
+  const {
+    size = "3x3",
+    value,
+    onChange,
+    tooltip = __("Position", "eightshift-ui-components"),
+    label,
+    icon,
+    subtitle,
+    "aria-label": ariaLabel,
+    popoverPosition
+  } = props;
+  const [currentValue, setCurrentValue] = useState(value);
+  const [tooltipText, setTooltipText] = useState(null);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const ref = useRef(null);
+  const innerRef = useRef(null);
+  const allSizeOptions = [
+    {
+      value: "top left",
+      label: __("Top-left", "eightshift-ui-components"),
+      availableOn: ["3x3", "2x2"]
+    },
+    {
+      value: "top center",
+      label: __("Top-center", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "top right",
+      label: __("Top-right", "eightshift-ui-components"),
+      availableOn: ["3x3", "2x2"]
+    },
+    {
+      value: "center left",
+      label: __("Center-left", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "center center",
+      label: __("Center", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "center right",
+      label: __("Center-right", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "bottom left",
+      label: __("Bottom-left", "eightshift-ui-components"),
+      availableOn: ["3x3", "2x2"]
+    },
+    {
+      value: "bottom center",
+      label: __("Bottom-center", "eightshift-ui-components"),
+      availableOn: ["3x3"]
+    },
+    {
+      value: "bottom right",
+      label: __("Bottom-right", "eightshift-ui-components"),
+      availableOn: ["3x3", "2x2"]
+    }
+  ];
+  const sizeOptions = allSizeOptions.filter(({ availableOn }) => availableOn.includes(size)).map((item) => ({
+    ...item,
+    icon: item.value === currentValue ? icons.matrixAlignControlDotActive : icons.matrixAlignControlDotInactive
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseControl,
+      {
+        icon,
+        label,
+        subtitle,
+        inline: true,
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: icons[`position${size}${upperFirst(camelCase(currentValue))}`],
+            onPress: () => {
+              setPopoverOpen(true);
+            },
+            forwardedRef: ref,
+            tooltip,
+            children: !(icon || subtitle) && label
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        "aria-label": ariaLabel ?? __("Select position", "eightshift-ui-components"),
+        position: popoverPosition,
+        triggerRef: ref,
+        onOpenChange: setPopoverOpen,
+        isOpen: popoverOpen,
+        ariaLabel: label ?? tooltip,
+        children: /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            text: tooltipText,
+            placement: "bottom",
+            delayDuration: 200,
+            open: popoverOpen && tooltipText !== null,
+            offset: 10,
+            triggerRef: innerRef,
+            className: tooltipText === null ? "es-uic-opacity-0" : "",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: innerRef,
+                className: classnames(
+                  "es-uic-grid",
+                  size === "3x3" && "es-uic-grid-cols-3 es-uic-grid-rows-3",
+                  size === "2x2" && "es-uic-grid-cols-2 es-uic-grid-rows-2"
+                ),
+                children: sizeOptions.map(({ value: value2, label: label2, icon: icon2 }) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: icon2,
+                    type: "ghost",
+                    onHoverStart: () => setTooltipText(label2),
+                    onHoverEnd: () => setTooltipText(null),
+                    onFocus: () => setTooltipText(label2),
+                    onPress: () => {
+                      setCurrentValue(value2);
+                      setTooltipText(null);
+                      setPopoverOpen(false);
+                      onChange(value2);
+                    }
+                  },
+                  value2
+                ))
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  MatrixAlign
+};