@eightshift/ui-components 0.0.1

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

@@ -0,0 +1,116 @@
+import { jsx } from "react/jsx-runtime";
+import { S as StateManagedSelect$1 } from "../../react-select.esm-BjRWqf0E.js";
+import { CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
+import { getValue, customOnChange } from "./shared.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { eightshiftSelectClasses } from "./styles.js";
+import { c as components } from "../../index-a301f526.esm-Bioi4cGX.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.
+ *
+ * @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,
+    ...additionalProps
+  } = props;
+  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) => customOnChange(simpleValue, v, onChange),
+          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
+          },
+          ...additionalProps
+        }
+      )
+    }
+  );
+};
+export {
+  Select
+};

package/dist/components/select/styles.js

@@ -0,0 +1,55 @@
+import { classnames } from "../../utilities/classnames.js";
+const controlStyles = {
+  base: "es-uic-border es-uic-rounded-md es-uic-bg-white es-uic-text-sm es-uic-transition es-uic-group es-uic-shadow-sm !es-uic-min-h-10",
+  focus: "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50",
+  nonFocus: "es-uic-border-gray-300"
+};
+const placeholderStyles = "es-uic-text-gray-400 es-uic-ml-0.5";
+const selectInputStyles = "focus:es-uic-outline-none [&_input]:!es-uic-shadow-none [&_input:focus]:!es-uic-shadow-none";
+const valueContainerStyles = "es-uic-gap-1 es-uic-ml-1 !es-uic-overflow-visible";
+const singleValueStyles = "es-uic-ml-0.5";
+const multiValueStyles = classnames(
+  "es-uic-bg-gray-100 es-uic-rounded es-uic-p-1 es-uic-border es-uic-border-gray-100 es-uic-hover:border-gray-300 es-uic-items-center es-uic-gap-1.5 es-uic-transition es-uic-overflow-visible",
+  "[: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"
+);
+const multiValueLabelStyles = "es-uic-select-none";
+const multiValueRemoveStyles = "hover:es-uic-bg-red-500/15 hover:es-uic-text-red-900 es-uic-text-gray-500 es-uic-rounded es-uic-p-0.5 [&>svg]:es-uic-size-3.5 [&>svg]:es-uic-stroke-[1.5] es-uic-transition";
+const clearIndicatorStyles = "es-uic-text-gray-500 es-uic-p-1 es-uic-rounded-md es-uic-hover:bg-red-50 es-uic-hover:text-red-800 es-uic-transition";
+const dropdownIndicatorStyles = "es-uic-text-gray-500 es-uic-px-1 group-hover:es-uic-text-black [&>svg]:es-uic-transition-transform [&>svg]:es-uic-duration-500 [&>svg]:es-uic-size-5.5";
+const menuStyles = "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-mt-1 es-uic-text-sm es-uic-overflow-x-hidden";
+const optionStyles = {
+  base: "es-uic-p-2 !es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-gray-800 es-uic-rounded [&>svg]:es-uic-size-5 [&>svg]:es-uic-text-gray-500 es-uic-transition es-uic-mx-1 first:es-uic-mt-1 last:es-uic-mb-1 !es-uic-w-auto es-uic-min-h-9",
+  focus: "es-uic-bg-gray-100 active:es-uic-bg-teal-700/15",
+  selected: "es-uic-bg-teal-600/15 es-uic-text-teal-950"
+};
+const noOptionsMessageStyles = "es-uic-text-gray-400 es-uic-p-4";
+const groupHeadingStyles = "es-uic-ml-3 es-uic-mt-2 es-uic-text-gray-500 es-uic-empty:hidden";
+const groupStyles = "es-uic-border-b last:es-uic-border-b-0";
+const eightshiftSelectClasses = {
+  clearIndicator: () => clearIndicatorStyles,
+  control: ({ isFocused }) => classnames(
+    isFocused ? controlStyles.focus : controlStyles.nonFocus,
+    controlStyles.base
+  ),
+  dropdownIndicator: () => dropdownIndicatorStyles,
+  group: () => groupStyles,
+  groupHeading: () => groupHeadingStyles,
+  input: () => selectInputStyles,
+  menu: () => menuStyles,
+  multiValue: () => multiValueStyles,
+  multiValueLabel: () => multiValueLabelStyles,
+  multiValueRemove: () => multiValueRemoveStyles,
+  noOptionsMessage: () => noOptionsMessageStyles,
+  option: ({ isFocused, isSelected }) => classnames(
+    isFocused && optionStyles.focus,
+    isSelected && optionStyles.selected,
+    optionStyles.base
+  ),
+  placeholder: () => placeholderStyles,
+  singleValue: () => singleValueStyles,
+  valueContainer: () => valueContainerStyles
+};
+export {
+  eightshiftSelectClasses
+};

package/dist/components/slider/column-config-slider.js

@@ -0,0 +1,225 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-Pyh2V4bY.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { classnames } from "../../utilities/classnames.js";
+import { _ as __, s as sprintf, a as _n } from "../../default-i18n-BhE-OUmt.js";
+import { icons } from "../../icons/icons.js";
+/**
+ * A two-thumb slider for selecting a range of columns.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display within the slider.
+ * @param {string} [props.help] - The help text shown below the slider.
+ * @param {string} [props.label] - The label of the slider.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display next to the label.
+ * @param {string} [props.subtitle] - The subtitle of the slider.
+ * @param {Number} [props.columns=12] - Number of columns.
+ * @param {boolean} [props.disableWidth] - If `true`, the width thumb is disabled.
+ * @param {boolean} [props.disableOffset] - If `true`, the offset thumb is disabled.
+ * @param {boolean} [props.showOuterAsGutter] - If `true`, the outer columns are displayed with a special icons instead of the column numbers. Other numbers are offset by 1.
+ * @param {Number | Number[]} props.value - The current value of the slider.
+ * @param {Function} props.onChange - Function to run when the value changes.
+ * @param {Function} props.onChangeEnd - Function to run when the value change ends.
+ * @param {boolean} [props.disabled] - If `true`, the slider is disabled.
+ * @param {string} [props.labelClassName] - Additional classes to pass to the label.
+ *
+ * @returns {JSX.Element} The ColumnConfigSlider component.
+ *
+ * @example
+ * <ColumnConfigSlider
+ * 	label='My slider'
+ * 	value={sliderValue}
+ * 	onChange={setSliderValue}
+ * />
+ *
+ * @preserve
+ */
+const ColumnConfigSlider = (props) => {
+  const {
+    icon,
+    help,
+    label,
+    actions,
+    subtitle,
+    columns = 12,
+    disableWidth,
+    disableOffset,
+    showOuterAsGutter,
+    value,
+    onChange,
+    onChangeEnd,
+    disabled,
+    labelClassName,
+    ...other
+  } = props;
+  const markerData = [...Array(columns).keys()];
+  const thumbLabels = [__("Offset", "eightshift-ui-components"), __("Width", "eightshift-ui-components")];
+  return /* @__PURE__ */ jsx(
+    $6f909507e6374d18$export$472062a354075cee,
+    {
+      value,
+      onChange,
+      minValue: 1,
+      maxValue: columns,
+      step: 1,
+      isDisabled: disabled,
+      orientation: "horizontal",
+      className: "es-uic-w-full es-uic-pb-3.5",
+      onChangeEnd,
+      ...other,
+      children: /* @__PURE__ */ jsx(
+        BaseControl,
+        {
+          icon,
+          label,
+          subtitle,
+          help,
+          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+            actions,
+            /* @__PURE__ */ jsx(ColumnConfigSliderOutput, { showOuterAsGutter })
+          ] }),
+          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+          className: labelClassName,
+          controlContainerClassName: "es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0",
+          children: /* @__PURE__ */ jsx(
+            $6f909507e6374d18$export$105594979f116971,
+            {
+              className: "es-uic-isolate es-uic-grid es-uic-h-10 es-uic-w-full es-uic-grid-rows-1",
+              style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+              children: ({ state }) => {
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classnames(
+                        "es-uic-col-span-full es-uic-row-span-1 es-uic-row-start-1 es-uic-h-full es-uic-w-full es-uic-grow es-uic-rounded-md es-uic-border",
+                        disabled ? "es-uic-border-gray-200 es-uic-bg-white" : "es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-shadow-sm"
+                      )
+                    }
+                  ),
+                  markerData.slice(0, -1).map((marker) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classnames(
+                        "es-uic-row-span-1 es-uic-row-start-1 es-uic-h-full es-uic-w-px es-uic-justify-self-center",
+                        marker >= value[0] - 1 && marker < value[1] ? "es-uic-bg-teal-700/25" : "es-uic-bg-gray-300",
+                        (marker === value[0] - 2 || marker === value[1] - 1) && "es-uic-hidden"
+                      ),
+                      style: { gridColumn: `${marker + 1} / span 2` }
+                    },
+                    marker
+                  )),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classnames(
+                        "es-uic-pointer-events-none es-uic-col-start-1 es-uic-row-start-1 es-uic-border",
+                        "es-uic-h-full es-uic-w-full es-uic-self-center es-uic-rounded-md",
+                        disabled ? "es-uic-border-gray-200 es-uic-bg-gray-50" : "es-uic-border-teal-500 es-uic-bg-teal-500/30"
+                      ),
+                      style: {
+                        gridColumn: `${value[0]} / span ${value[1] - value[0] + 1}`
+                      }
+                    }
+                  ),
+                  markerData.map((marker, index) => {
+                    return /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: classnames(
+                          "es-uic-row-span-1 es-uic-row-start-1 es-uic-select-none es-uic-place-self-center es-uic-text-xs es-uic-transition-colors",
+                          "es-uic-inset-y-0 es-uic-my-auto es-uic-h-fit es-uic-pl-px es-uic-text-center",
+                          "[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-[1.5]",
+                          marker >= value[0] - 1 && marker < value[1] ? "es-uic-text-teal-700" : "es-uic-text-gray-400"
+                        ),
+                        style: { gridColumn: `${index + 1} / span 1` },
+                        children: [
+                          showOuterAsGutter && marker === 0 && icons.chevronLeft,
+                          showOuterAsGutter && marker === columns - 1 && icons.chevronRight,
+                          showOuterAsGutter && marker > 0 && marker < columns - 1 && marker,
+                          !showOuterAsGutter && marker + 1
+                        ]
+                      },
+                      marker
+                    );
+                  }),
+                  state.values.map((_, i) => /* @__PURE__ */ jsx(
+                    $6f909507e6374d18$export$2c1b491743890dec,
+                    {
+                      index: i,
+                      "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
+                      isDisabled: i === 0 && disableOffset || i === 1 && disableWidth,
+                      className: classnames(
+                        "!es-uic-static es-uic-row-span-1 es-uic-row-start-1 es-uic-h-6 es-uic-w-1.5 es-uic-rounded-full es-uic-border es-uic-transition es-uic-duration-300",
+                        i === 0 && "!-es-uic-translate-x-1/2 !es-uic-translate-y-0 es-uic-self-center es-uic-justify-self-start",
+                        i === 1 && "!es-uic-translate-x-1/2 !es-uic-translate-y-0 es-uic-self-center es-uic-justify-self-end",
+                        "es-uic-shadow dragging:es-uic-bg-teal-600 disabled:es-uic-opacity-0",
+                        "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+                        "es-uic-border-teal-600 es-uic-bg-teal-500 es-uic-shadow-teal-600/50"
+                      ),
+                      style: {
+                        gridColumn: `${state.values[i]} / span 1`
+                      }
+                    },
+                    i
+                  ))
+                ] });
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+};
+/**
+ * The output for the ColumnConfigSlider component.
+ *
+ * Meant to be used within the ColumnConfigSlider component, e.g in help or actions.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.showOuterAsGutter] - If `true`, the outer columns are displayed with a special icons instead of the column numbers. Other numbers are offset by 1.
+ *
+ * @returns {JSX.Element} The ColumnConfigSliderOutput component.
+ *
+ * @example
+ * <ColumnConfigSliderOutput />
+ *
+ * @preserve
+ */
+const ColumnConfigSliderOutput = ({ showOuterAsGutter }) => /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: classnames("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"), children: ({ state }) => {
+  const columns = state.getThumbMaxValue(1);
+  const offset = parseInt(state.getThumbValueLabel(0));
+  const endOffset = parseInt(state.getThumbValueLabel(1));
+  const width = endOffset - offset + 1;
+  if (offset === 1 && endOffset === columns) {
+    return __("Full-width", "eightshift-ui-components");
+  }
+  if (offset === 1 && endOffset < columns) {
+    return sprintf(__("To col %d", "eightshift-ui-components"), showOuterAsGutter ? endOffset - 1 : endOffset);
+  }
+  if (offset > 1 && endOffset === columns) {
+    return sprintf(__("From col %d", "eightshift-ui-components"), showOuterAsGutter ? offset - 1 : offset);
+  }
+  if (showOuterAsGutter && width === 1 && offset === 1) {
+    return __("Start gutter", "eightshift-ui-components");
+  }
+  if (showOuterAsGutter && endOffset === columns) {
+    return __("Start gutter", "eightshift-ui-components");
+  }
+  if (width === 1) {
+    return sprintf(__("Col %d", "eightshift-ui-components"), offset);
+  }
+  return sprintf(
+    _n("%s col from %s", "%s cols from %s", width, "eightshift-ui-components"),
+    width,
+    showOuterAsGutter ? offset - 1 : offset
+  );
+} });
+export {
+  ColumnConfigSlider,
+  ColumnConfigSliderOutput
+};