@chekinapp/ui 0.0.116 → 0.0.117

package/dist/index.cjs

@@ -12873,9 +12873,9 @@ var import_react_i18next28 = require("react-i18next");
 
 // src/dashboard/_select-internals/utils.ts
 function isOptionGroup(item) {
-  return Boolean(
-    item && Array.isArray(item.options)
-  );
+  if (!item || typeof item !== "object") return false;
+  if ("value" in item) return false;
+  return Array.isArray(item.options);
 }
 function flattenGroupedOptions(items) {
   if (!items) return [];
@@ -12986,7 +12986,7 @@ function DefaultOption(props) {
 
 // src/dashboard/_select-internals/SelectMenu.tsx
 var import_jsx_runtime148 = require("react/jsx-runtime");
-function buildMenuEntries(groupedOptions, options, formatGroupLabel) {
+function buildMenuEntries(groupedOptions, options, formatGroupLabel, listboxId) {
   if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
     return options.map((option, index) => ({
       kind: "option",
@@ -12995,38 +12995,39 @@ function buildMenuEntries(groupedOptions, options, formatGroupLabel) {
       flatIndex: index
     }));
   }
-  const indexByOption = /* @__PURE__ */ new Map();
-  options.forEach((option, index) => indexByOption.set(option, index));
+  const visibleValues = new Set(options.map((option) => option.value));
   const entries = [];
+  let flatIndex = 0;
   let groupCount = 0;
   for (const item of groupedOptions) {
     if (isOptionGroup(item)) {
-      const visible = item.options.filter((option) => indexByOption.has(option));
-      if (visible.length === 0) continue;
-      const label = formatGroupLabel ? formatGroupLabel(item) : item.label;
-      entries.push({
-        kind: "group-label",
-        key: `__group-${groupCount}`,
-        label
-      });
-      groupCount += 1;
-      for (const option of visible) {
-        const flatIndex = indexByOption.get(option);
-        entries.push({
-          kind: "option",
+      const visible = [];
+      for (const option of item.options) {
+        if (!visibleValues.has(option.value)) continue;
+        visible.push({
           key: `${String(option.value)}-${flatIndex}`,
           option,
           flatIndex
         });
+        flatIndex += 1;
       }
-    } else if (indexByOption.has(item)) {
-      const flatIndex = indexByOption.get(item);
+      if (visible.length === 0) continue;
+      entries.push({
+        kind: "group",
+        key: `__group-${groupCount}`,
+        labelId: `${listboxId}-group-${groupCount}`,
+        label: formatGroupLabel ? formatGroupLabel(item) : item.label,
+        options: visible
+      });
+      groupCount += 1;
+    } else if (visibleValues.has(item.value)) {
       entries.push({
         kind: "option",
         key: `${String(item.value)}-${flatIndex}`,
         option: item,
         flatIndex
       });
+      flatIndex += 1;
     }
   }
   return entries;
@@ -13070,9 +13071,37 @@ function SelectMenu({
     [selectedValues, selectedValue]
   );
   const entries = React45.useMemo(
-    () => buildMenuEntries(groupedOptions, options, formatGroupLabel),
-    [groupedOptions, options, formatGroupLabel]
+    () => buildMenuEntries(groupedOptions, options, formatGroupLabel, id),
+    [groupedOptions, options, formatGroupLabel, id]
   );
+  const renderOption = (entry) => {
+    const { option, flatIndex, key } = entry;
+    const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
+    const isHighlighted = flatIndex === highlightedIndex;
+    const optionDisabled = Boolean(
+      disabled || option.isDisabled || isOptionDisabled?.(option)
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+      Option,
+      {
+        id: getOptionId2(flatIndex),
+        option,
+        index: flatIndex,
+        isSelected,
+        isHighlighted,
+        isDisabled: optionDisabled,
+        isLast: flatIndex === lastIndex,
+        isMulti: Boolean(isMulti),
+        onClick: onOptionClick,
+        onHover: onOptionHover ?? (() => void 0),
+        innerRef: (node) => selectedOptionRef?.(flatIndex, node),
+        inputValue,
+        selectedOptions: selectedList,
+        formatOptionLabel
+      },
+      key
+    );
+  };
   const wasAtBottomRef = React45.useRef(false);
   const handleScroll = React45.useCallback(
     (event) => {
@@ -13107,43 +13136,20 @@ function SelectMenu({
       children: [
         !hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "px-3 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: emptyMessage })),
         entries.map((entry) => {
-          if (entry.kind === "group-label") {
-            return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
-              "div",
-              {
-                role: "presentation",
-                className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--chekin-color-gray-1)]",
-                children: entry.label
-              },
-              entry.key
-            );
+          if (entry.kind === "group") {
+            return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { role: "group", "aria-labelledby": entry.labelId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+                "div",
+                {
+                  id: entry.labelId,
+                  className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--chekin-color-gray-1)]",
+                  children: entry.label
+                }
+              ),
+              entry.options.map(renderOption)
+            ] }, entry.key);
           }
-          const { option, flatIndex } = entry;
-          const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
-          const isHighlighted = flatIndex === highlightedIndex;
-          const optionDisabled = Boolean(
-            disabled || option.isDisabled || isOptionDisabled?.(option)
-          );
-          return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
-            Option,
-            {
-              id: getOptionId2(flatIndex),
-              option,
-              index: flatIndex,
-              isSelected,
-              isHighlighted,
-              isDisabled: optionDisabled,
-              isLast: flatIndex === lastIndex,
-              isMulti: Boolean(isMulti),
-              onClick: onOptionClick,
-              onHover: onOptionHover ?? (() => void 0),
-              innerRef: (node) => selectedOptionRef?.(flatIndex, node),
-              inputValue,
-              selectedOptions: selectedList,
-              formatOptionLabel
-            },
-            entry.key
-          );
+          return renderOption(entry);
         }),
         footer
       ]
@@ -15148,13 +15154,7 @@ function createCountTrigger(opts) {
 
 // src/dashboard/select-checkboxes/SelectAllRow.tsx
 var import_jsx_runtime169 = require("react/jsx-runtime");
-function SelectAllRow({
-  label,
-  checked,
-  indeterminate,
-  disabled,
-  onToggle
-}) {
+function SelectAllRow({ label, checked, disabled, onToggle }) {
   return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
     "button",
     {
@@ -15169,7 +15169,7 @@ function SelectAllRow({
         /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
           BaseCheckbox,
           {
-            checked: indeterminate ? "indeterminate" : checked,
+            checked,
             disabled,
             size: "s",
             tabIndex: -1,
@@ -15205,7 +15205,6 @@ function SelectCheckboxesInternal(props, ref) {
     allowSelectAll = false,
     selectAllLabel,
     searchable = true,
-    searchPlaceholder,
     filterOption = defaultFilterOption,
     closeMenuOnSelect = false,
     onSearchChange,
@@ -15240,7 +15239,6 @@ function SelectCheckboxesInternal(props, ref) {
     return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
   }, 0);
   const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
-  const someVisibleSelected = visibleSelectedCount > 0 && visibleSelectedCount < filteredFlat.length;
   const handleToggleAll = React59.useCallback(() => {
     if (allVisibleSelected) {
       const visibleValues = new Set(filteredFlat.map((option) => option.value));
@@ -15276,7 +15274,6 @@ function SelectCheckboxesInternal(props, ref) {
     {
       label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
       checked: allVisibleSelected,
-      indeterminate: someVisibleSelected,
       onToggle: handleToggleAll
     }
   ) : void 0;
@@ -20311,44 +20308,59 @@ var React83 = __toESM(require("react"), 1);
 var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
 var import_lucide_react59 = require("lucide-react");
 var import_jsx_runtime196 = require("react/jsx-runtime");
-var AirbnbSwitch = React83.forwardRef(({ className, value, onChange, disabled, loading, readOnly, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-  SwitchPrimitives2.Root,
-  {
-    ref,
-    className: cn(
-      "group inline-flex h-[24px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-solid border-transparent p-[2px] transition-colors duration-200",
-      "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
-      "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
-      "aria-readonly:cursor-default aria-readonly:opacity-100",
-      "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
-      className
-    ),
-    disabled,
-    checked: value,
-    value: String(value),
-    onCheckedChange: !disabled && !readOnly ? onChange : void 0,
-    "aria-busy": loading,
-    "aria-readonly": readOnly,
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-      SwitchPrimitives2.Thumb,
-      {
-        className: cn(
-          "flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
-          "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-          import_lucide_react59.Check,
-          {
-            "aria-hidden": "true",
-            className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
-            strokeWidth: 3
-          }
-        )
-      }
-    )
+var AirbnbSwitch = React83.forwardRef(({ className, value, onChange, disabled, loading, readOnly, id, label, error, wrapperClassName, ...props }, ref) => {
+  const generatedId = React83.useId();
+  const fieldId = id || generatedId;
+  const switchElement = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+    SwitchPrimitives2.Root,
+    {
+      ref,
+      className: cn(
+        "group inline-flex h-[24px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-solid border-transparent p-[2px] transition-colors duration-200",
+        "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
+        "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
+        "aria-readonly:cursor-default aria-readonly:opacity-100",
+        "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
+        className
+      ),
+      id: fieldId,
+      disabled,
+      checked: value,
+      value: String(value),
+      onCheckedChange: !disabled && !readOnly ? onChange : void 0,
+      "aria-busy": loading,
+      "aria-readonly": readOnly,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+        SwitchPrimitives2.Thumb,
+        {
+          className: cn(
+            "flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
+            "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+            import_lucide_react59.Check,
+            {
+              "aria-hidden": "true",
+              className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
+              strokeWidth: 3
+            }
+          )
+        }
+      )
+    }
+  );
+  if (!label && !error) {
+    return switchElement;
   }
-));
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_jsx_runtime196.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
+      switchElement,
+      label && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Label, { htmlFor: fieldId, className: "cursor-pointer text-base font-medium", children: label })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(ErrorMessage, { disabled, children: error })
+  ] });
+});
 AirbnbSwitch.displayName = "AirbnbSwitch";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {