@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/PopperMenu-LJ36RPBW.mjs

@@ -0,0 +1,416 @@
+"use client";
+import {
+  DISABLED_GROUP,
+  MY_LOCAL_DISABLE_GROUP,
+  OptionRenderer,
+  gitHubPickerRootStyle,
+  useSelector,
+  useStateContext
+} from "./chunk-OJV6V7YZ.mjs";
+import {
+  MuiPaper
+} from "./chunk-3VUAM2GY.mjs";
+import {
+  default2 as default4
+} from "./chunk-MDAUF7IL.mjs";
+import "./chunk-QFF3HTHL.mjs";
+import {
+  Button
+} from "./chunk-JIU5GVM7.mjs";
+import "./chunk-4Q54P737.mjs";
+import "./chunk-OP6LKXPA.mjs";
+import {
+  default26 as default5,
+  default33 as default6,
+  default53 as default7
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default3
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2
+} from "./chunk-S6EZVRZC.mjs";
+import "./chunk-FJ6ZGZIA.mjs";
+
+// src/components/elemental/Autocomplete/src/GitHubPicker/PopperMenu.tsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import Autocomplete, { autocompleteClasses as autocompleteClasses2 } from "@mui/material/Autocomplete";
+import InputBase from "@mui/material/InputBase";
+
+// src/components/elemental/Autocomplete/src/GitHubPicker/popperTheme.ts
+import { styled } from "@mui/material/styles";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
+var PickerPopper = styled(default4)(({ theme }) => ({
+  ...gitHubPickerRootStyle,
+  width: "var(--w)",
+  minWidth: 280,
+  zIndex: theme.zIndex.modal,
+  fontSize: 13,
+  overflow: "hidden",
+  borderRadius: 14,
+  border: "1px solid var(--picker-border)",
+  backgroundColor: "var(--mui-palette-background-paper)",
+  backgroundImage: "none",
+  boxShadow: "var(--picker-shadow)",
+  backdropFilter: "none",
+  WebkitBackdropFilter: "none",
+  "--picker-blur": "0px",
+  "--picker-glass": "none"
+}));
+var PickerOptionLi = styled("li")(() => ({
+  ...gitHubPickerRootStyle,
+  [`.${autocompleteClasses.listbox} &.${autocompleteClasses.option}`]: {
+    padding: 0,
+    margin: "2px 6px",
+    borderRadius: 10,
+    minHeight: 0
+  },
+  [`
+		&.${autocompleteClasses.option},
+		&.${autocompleteClasses.option}[aria-selected="true"],
+	`]: {
+    backgroundColor: "transparent"
+  },
+  [`
+		&.${autocompleteClasses.option}:hover,
+		&.${autocompleteClasses.option}[aria-selected="true"]:hover,
+	`]: {
+    backgroundColor: "var(--picker-hover-bg)"
+  },
+  [`
+		&.${autocompleteClasses.option}.${autocompleteClasses.focused},
+		&.${autocompleteClasses.option}.${autocompleteClasses.focused}[aria-selected="true"]
+	`]: {
+    backgroundColor: "var(--picker-focus-soft)"
+  },
+  [`&.${autocompleteClasses.option}[aria-selected="true"]`]: {
+    backgroundColor: "var(--picker-focus-soft)",
+    boxShadow: "inset 0 1px 0 var(--picker-highlight)"
+  }
+}));
+var PickerPaper = styled(MuiPaper)({
+  ...gitHubPickerRootStyle,
+  borderRadius: 14,
+  border: "none",
+  "--paper-bg": "transparent",
+  backgroundColor: "transparent",
+  backgroundImage: "none",
+  boxShadow: "none",
+  "&.MuiPaper-root": {
+    "--paper-bg": "transparent",
+    backgroundColor: "transparent",
+    backgroundImage: "none",
+    boxShadow: "none",
+    border: "none"
+  }
+});
+var pickerSearchSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  mx: 1,
+  mt: 0.5,
+  mb: 0.75,
+  px: 1.25,
+  py: 0.5,
+  borderRadius: 2,
+  backgroundColor: "var(--picker-search-bg)",
+  border: "1px solid var(--picker-search-border)",
+  boxShadow: "var(--picker-search-shadow)",
+  "& .MuiInputBase-root": {
+    fontSize: "0.875rem",
+    color: "var(--picker-text)"
+  },
+  "& .MuiInputBase-input": {
+    py: 0.6,
+    "&::placeholder": {
+      color: "var(--picker-text-secondary)",
+      opacity: 0.8
+    }
+  }
+};
+var pickerGroupLabelSx = {
+  px: 1.75,
+  pt: 1.25,
+  pb: 0.5,
+  fontSize: "0.66rem",
+  fontWeight: 700,
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  lineHeight: 1.4,
+  color: "var(--picker-text-secondary)"
+};
+
+// src/components/elemental/Autocomplete/src/GitHubPicker/PopperMenu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function MyPopper({
+  id,
+  listboxId,
+  anchorEl,
+  allMinimalOptions,
+  options,
+  closeHandler,
+  title,
+  placement = "bottom-start",
+  multiple = true,
+  disabled = false,
+  useGroup,
+  isAddOptionEnabled,
+  addOptionHandler,
+  isPopperFreezed
+}) {
+  const minimal = useSelector()("minimal");
+  const { select } = useStateContext();
+  const [query, setQuery] = useState("");
+  const open = Boolean(anchorEl);
+  const listboxRef = useRef(null);
+  const pinnedScrollTop = useRef(null);
+  useEffect(() => {
+    if (open) setQuery("");
+  }, [open]);
+  useLayoutEffect(() => {
+    if (!open) {
+      pinnedScrollTop.current = null;
+      return;
+    }
+    const list = listboxRef.current;
+    const top = pinnedScrollTop.current;
+    if (list == null || top == null) return;
+    list.scrollTop = top;
+    const id2 = window.requestAnimationFrame(() => {
+      if (listboxRef.current) listboxRef.current.scrollTop = top;
+      pinnedScrollTop.current = null;
+    });
+    return () => window.cancelAnimationFrame(id2);
+  }, [open, minimal]);
+  useEffect(() => {
+    if (!open) return;
+    const id2 = window.setTimeout(() => {
+      if (listboxRef.current) listboxRef.current.scrollTop = 0;
+    }, 30);
+    return () => window.clearTimeout(id2);
+  }, [open]);
+  const handleChange = (event, newValue, reason) => {
+    if (event.type === "keydown" && reason === "removeOption") {
+      return;
+    }
+    if (listboxRef.current) {
+      pinnedScrollTop.current = listboxRef.current.scrollTop;
+    }
+    if (!multiple && (newValue == null || newValue === "")) {
+      const cleared = select(null);
+      if (!isPopperFreezed) closeHandler?.(cleared);
+      return;
+    }
+    const currentId = !multiple && minimal && !Array.isArray(minimal) ? minimal.id : null;
+    const nextOption = Array.isArray(newValue) ? newValue[0] : newValue;
+    if (!multiple && currentId && nextOption && nextOption.id === currentId) {
+      const cleared = select(null);
+      if (!isPopperFreezed) closeHandler?.(cleared);
+      return;
+    }
+    const newState = select(newValue);
+    if (!multiple && !isPopperFreezed) {
+      closeHandler?.(newState);
+    }
+  };
+  const popperId = open ? id : void 0;
+  const popperWidth = Math.max(anchorEl?.offsetWidth ?? 320, 320);
+  return /* @__PURE__ */ jsx(
+    PickerPopper,
+    {
+      id: popperId,
+      open,
+      anchorEl,
+      disablePortal: true,
+      placement,
+      style: { "--w": `${popperWidth}px` },
+      modifiers: [
+        { name: "offset", options: { offset: [0, 8] } },
+        { name: "preventOverflow", options: { padding: 8 } }
+      ],
+      children: /* @__PURE__ */ jsxs(PickerPaper, { elevation: 0, variant: "outlined", children: [
+        title ? /* @__PURE__ */ jsx(default2, { sx: { px: 1.75, pt: 1.5, pb: 0.5 }, children: /* @__PURE__ */ jsx(
+          default3,
+          {
+            sx: {
+              fontSize: "0.78rem",
+              fontWeight: 600,
+              letterSpacing: "0.02em",
+              color: "var(--picker-text-secondary)",
+              m: 0
+            },
+            children: title
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            open,
+            disabled,
+            multiple,
+            onClose: (_event, reason) => {
+              if (reason === "escape" && !isPopperFreezed) {
+                closeHandler?.();
+              }
+            },
+            value: multiple ? Array.isArray(minimal) ? minimal : [] : minimal && !Array.isArray(minimal) ? minimal : null,
+            inputValue: query,
+            onInputChange: (_, value, reason) => {
+              if (reason === "reset") return;
+              setQuery(value);
+            },
+            onChange: handleChange,
+            disableCloseOnSelect: Boolean(multiple),
+            selectOnFocus: false,
+            clearOnBlur: false,
+            slots: {
+              popper: PopperComponent,
+              paper: ListSurface
+            },
+            slotProps: {
+              listbox: {
+                id: listboxId,
+                sx: {
+                  maxHeight: 320,
+                  py: 0.5,
+                  overflowX: "hidden",
+                  overflowAnchor: "none"
+                },
+                ref: listboxRef
+              }
+            },
+            noOptionsText: "No matches",
+            renderOption: (liProps, option, { selected }, ownerState) => {
+              const { key, onClick, ...optionProps } = liProps;
+              const fullOption = options.find((o) => o.id === option.id);
+              return /* @__PURE__ */ jsx(
+                PickerOptionLi,
+                {
+                  ...optionProps,
+                  onClick: (event) => {
+                    if (!multiple && selected) {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      if (listboxRef.current) {
+                        pinnedScrollTop.current = listboxRef.current.scrollTop;
+                      }
+                      const cleared = select(null);
+                      if (!isPopperFreezed) closeHandler?.(cleared);
+                      return;
+                    }
+                    onClick?.(event);
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    OptionRenderer,
+                    {
+                      disableBR: true,
+                      option: fullOption ?? null,
+                      selected,
+                      disabled: ownerState.disabled || option.disabled,
+                      slotProps: {
+                        DM: {
+                          isShowEndIcon: true,
+                          isShowDescription: true
+                        }
+                      }
+                    }
+                  )
+                },
+                key
+              );
+            },
+            options: allMinimalOptions,
+            groupBy: useGroup ? ((option) => option.disabled ? MY_LOCAL_DISABLE_GROUP : option.group) : void 0,
+            getOptionLabel: (option) => option.label,
+            getOptionKey: (option) => option.id,
+            getOptionDisabled: (option) => option.disabled ?? false,
+            isOptionEqualToValue: (option, value) => option.id === value?.id,
+            filterOptions: (options2, { inputValue }) => {
+              return options2.filter((option) => {
+                const filterKey = option.filterKey.toLowerCase();
+                const inputVal = inputValue.toLowerCase().split(" ");
+                return inputVal.every((val) => filterKey.includes(val));
+              });
+            },
+            renderInput: (params) => {
+              return /* @__PURE__ */ jsxs(default2, { ref: params.InputProps.ref, sx: pickerSearchSx, children: [
+                /* @__PURE__ */ jsx(default6, { sx: { fontSize: 18, color: "var(--picker-text-secondary)", flexShrink: 0 } }),
+                /* @__PURE__ */ jsx(
+                  InputBase,
+                  {
+                    fullWidth: true,
+                    autoFocus: true,
+                    placeholder: "Search",
+                    value: query,
+                    onChange: (event) => setQuery(event.target.value),
+                    inputProps: {
+                      ...params.inputProps,
+                      value: query,
+                      onBlur: (e) => {
+                        e.preventDefault();
+                      }
+                    }
+                  }
+                )
+              ] });
+            },
+            renderGroup: (p) => {
+              return /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx(default2, { className: `${autocompleteClasses2.groupLabel}`, sx: pickerGroupLabelSx, children: p.group === MY_LOCAL_DISABLE_GROUP ? /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  /* @__PURE__ */ jsx(default5, { sx: { fontSize: 14 } }),
+                  DISABLED_GROUP
+                ] }) : p.group }),
+                /* @__PURE__ */ jsx(default2, { component: "ul", sx: { padding: 0, margin: 0 }, className: `${autocompleteClasses2.groupUl}`, children: p.children })
+              ] }, p.key);
+            }
+          }
+        ),
+        isAddOptionEnabled ? /* @__PURE__ */ jsx(
+          default2,
+          {
+            sx: {
+              borderTop: "1px solid var(--picker-divider)",
+              px: 0.75,
+              py: 0.5
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "text",
+                size: "small",
+                startIcon: /* @__PURE__ */ jsx(default7, {}),
+                onClick: addOptionHandler,
+                sx: {
+                  width: "100%",
+                  justifyContent: "flex-start",
+                  px: 1,
+                  color: "var(--picker-text-secondary)",
+                  fontWeight: 600,
+                  letterSpacing: "0.02em"
+                },
+                children: "New option"
+              }
+            )
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+function ListSurface({
+  children,
+  ...other
+}) {
+  return /* @__PURE__ */ jsx(default2, { ...other, sx: { boxShadow: "none", backgroundColor: "transparent" }, children });
+}
+function PopperComponent(props) {
+  const { children, sx, ...other } = props;
+  const evaluatedSx = typeof sx === "function" ? {} : sx;
+  const content = typeof children === "function" ? children() : children;
+  return /* @__PURE__ */ jsx(default2, { ...other, sx: evaluatedSx, children: content });
+}
+export {
+  MyPopper as default
+};
+//# sourceMappingURL=PopperMenu-LJ36RPBW.mjs.map

package/dist/PopperMenu-LJ36RPBW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/elemental/Autocomplete/src/GitHubPicker/PopperMenu.tsx","../src/components/elemental/Autocomplete/src/GitHubPicker/popperTheme.ts"],"sourcesContent":["\"use client\"\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { Popper } from '@/ele/Overlay'\nimport type { PopperProps } from '@mui/material/Popper'\nimport Autocomplete, { autocompleteClasses, AutocompletePopperSlotPropsOverrides } from '@mui/material/Autocomplete'\nimport InputBase from '@mui/material/InputBase'\nimport { Box } from '@/ele/Box'\nimport { Typography } from '@/ele/Typography'\nimport { Button } from '@/ele/Button'\n\nimport { SearchIcon, DisabledSelectionIcon, AddIcon } from '@/icons/MuiIcon'\n\nimport OptionRenderer from './OptionRenderer'\nimport { PickerPopper, PickerOptionLi, PickerPaper, pickerSearchSx, pickerGroupLabelSx } from './popperTheme'\nimport { \n\tOptionClass, type MinimalOption, \n\tMY_LOCAL_DISABLE_GROUP, DISABLED_GROUP,\n} from './_utils'\nimport {\n\tuseLocalSelectedContext,\n\tuseLocalSelectedSelector,\n} from './states'\nimport type { StateType } from './states'\n\n/**\n * A popper menu for the GitHubPicker only\n */\nexport default function MyPopper({\n\tid,\n\tlistboxId,\n\tanchorEl,\n\tallMinimalOptions,\n\toptions,\n\tcloseHandler,\n\ttitle,\n\tplacement = 'bottom-start',\n\tmultiple = true,\n\tdisabled = false,\n\tuseGroup,\n\tisAddOptionEnabled,\n\taddOptionHandler,\n\tisPopperFreezed,\n}: {\n\tid: string;\n\tlistboxId: string;\n\tanchorEl: HTMLElement | null;\n\tallMinimalOptions: MinimalOption[];\n\toptions: OptionClass[];\n\tcloseHandler?: (newState?: StateType) => void;\n\ttitle?: React.ReactNode;\n\tplacement?: React.ComponentProps<typeof Popper>['placement'];\n\tmultiple?: React.ComponentProps<typeof Autocomplete>['multiple'];\n\tdisabled?: React.ComponentProps<typeof Autocomplete>['disabled'];\n\tuseGroup?: boolean;\n\tisAddOptionEnabled?: boolean;\n\taddOptionHandler?: () => void;\n\tisPopperFreezed?: boolean;\n}) {\n\tconst minimal = useLocalSelectedSelector()(\"minimal\")\n\tconst { select } = useLocalSelectedContext()\n\tconst [query, setQuery] = useState('')\n\tconst open = Boolean(anchorEl)\n\tconst listboxRef = useRef<HTMLUListElement | null>(null)\n\tconst pinnedScrollTop = useRef<number | null>(null)\n\n\tuseEffect(() => {\n\t\tif (open) setQuery('')\n\t}, [open])\n\n\tuseLayoutEffect(() => {\n\t\tif (!open) {\n\t\t\tpinnedScrollTop.current = null\n\t\t\treturn\n\t\t}\n\t\tconst list = listboxRef.current\n\t\tconst top = pinnedScrollTop.current\n\t\tif (list == null || top == null) return\n\t\tlist.scrollTop = top\n\t\tconst id = window.requestAnimationFrame(() => {\n\t\t\tif (listboxRef.current) listboxRef.current.scrollTop = top\n\t\t\tpinnedScrollTop.current = null\n\t\t})\n\t\treturn () => window.cancelAnimationFrame(id)\n\t}, [open, minimal])\n\n\tuseEffect(() => {\n\t\tif (!open) return\n\t\tconst id = window.setTimeout(() => {\n\t\t\tif (listboxRef.current) listboxRef.current.scrollTop = 0\n\t\t}, 30)\n\t\treturn () => window.clearTimeout(id)\n\t}, [open])\n\n\t// handle change for autocomplete -> local change\n\tconst handleChange:React.ComponentProps<typeof Autocomplete>[\"onChange\"] = (event, newValue, reason) => {\n\t\tif(\n\t\t\tevent.type === 'keydown' &&\n\t\t\treason === 'removeOption'\n\t\t) {\n\t\t\t// avoid the default behavior\n\t\t\treturn\n\t\t}\n\n\t\t\tif (listboxRef.current) {\n\t\t\t\tpinnedScrollTop.current = listboxRef.current.scrollTop\n\t\t\t}\n\n\t\t\tif (!multiple && (newValue == null || newValue === '')) {\n\t\t\t\tconst cleared = select(null)\n\t\t\t\tif (!isPopperFreezed) closeHandler?.(cleared)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst currentId = !multiple && minimal && !Array.isArray(minimal) ? minimal.id : null\n\t\t\tconst nextOption = Array.isArray(newValue) ? newValue[0] : newValue\n\t\t\tif (!multiple && currentId && nextOption && nextOption.id === currentId) {\n\t\t\t\tconst cleared = select(null)\n\t\t\t\tif (!isPopperFreezed) closeHandler?.(cleared)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// update the local state and get the new state synchronously\n\t\t\tconst newState = select(newValue as (MinimalOption|MinimalOption[]))\n\t\t\t// close the popper if not multiple and pass the updated state\n\t\t\tif(!multiple && !isPopperFreezed){\n\t\t\t\tcloseHandler?.(newState)\n\t\t\t}\n\t}\n\n\tconst popperId = open ? id : undefined\n\tconst popperWidth = Math.max(anchorEl?.offsetWidth ?? 320, 320)\n\n\treturn (\n\t\t<PickerPopper\n\t\t\tid={popperId}\n\t\t\topen={open}\n\t\t\tanchorEl={anchorEl}\n\t\t\tdisablePortal\n\t\t\tplacement={placement}\n\t\t\tstyle={{ '--w': `${popperWidth}px` } as React.CSSProperties}\n\t\t\tmodifiers={[\n\t\t\t\t{ name: 'offset', options: { offset: [0, 8] } },\n\t\t\t\t{ name: 'preventOverflow', options: { padding: 8 } },\n\t\t\t]}\n\t\t>\n\t\t\t\t<PickerPaper elevation={0} variant=\"outlined\">\n\t\t\t\t{title ? (\n\t\t\t\t\t<Box sx={{ px: 1.75, pt: 1.5, pb: 0.5 }}>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\tfontSize: '0.78rem',\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\tletterSpacing: '0.02em',\n\t\t\t\t\t\t\t\tcolor: 'var(--picker-text-secondary)',\n\t\t\t\t\t\t\t\tm: 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t) : null}\n        <Autocomplete\n          open={open}\n          disabled={disabled}\n          multiple={multiple}\n\t\t\t\t\tonClose={(_event, reason) => {\n\t\t\t\t\t\tif (reason === 'escape' && !isPopperFreezed) {\n\t\t\t\t\t\t\tcloseHandler?.()\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n          value={multiple\n            ? (Array.isArray(minimal) ? minimal : [])\n            : (minimal && !Array.isArray(minimal) ? minimal : null)\n          }\n          inputValue={query}\n          onInputChange={(_, value, reason) => {\n            if (reason === 'reset') return\n            setQuery(value)\n          }}\n          onChange={handleChange}\n          disableCloseOnSelect={Boolean(multiple)}\n          selectOnFocus={false}\n          clearOnBlur={false}\n          slots={{\n            popper: PopperComponent,\n            paper: ListSurface,\n          }}\n          slotProps={{\n            listbox:{\n              id: listboxId,\n              sx:{\n\t\t\t\t\t\t\t\tmaxHeight: 320,\n\t\t\t\t\t\t\t\tpy: 0.5,\n\t\t\t\t\t\t\t\toverflowX: 'hidden',\n\t\t\t\t\t\t\t\toverflowAnchor: 'none',\n\t\t\t\t\t\t\t},\n              ref: listboxRef,\n            },\n          }}\n          noOptionsText=\"No matches\"\n\n          renderOption={(liProps, option, { selected }, ownerState )=>{\n            const { key, onClick, ...optionProps } = liProps\n            // find the option with full data from the minimal option\n            // including the icon\n            const fullOption = options.find(o => o.id === option.id)\n\n            return (\n            <PickerOptionLi\n              key={key}\n              {...optionProps}\n              onClick={(event) => {\n                if (!multiple && selected) {\n                  event.preventDefault()\n                  event.stopPropagation()\n                  if (listboxRef.current) {\n                    pinnedScrollTop.current = listboxRef.current.scrollTop\n                  }\n                  const cleared = select(null)\n                  if (!isPopperFreezed) closeHandler?.(cleared)\n                  return\n                }\n                onClick?.(event)\n              }}\n            >\n              <OptionRenderer \n                disableBR\n                option={fullOption??null}\n                selected={selected}\n                disabled={ownerState.disabled || option.disabled}\n                slotProps={{\n                  DM:{\n                    isShowEndIcon:true,\n                    isShowDescription:true,\n                  },\n                }}\n              />\n            </PickerOptionLi>)\n          }}\n          options={allMinimalOptions}\n          \n          groupBy={useGroup?\n            ((option:MinimalOption) => option.disabled? MY_LOCAL_DISABLE_GROUP : option.group)\n            :undefined\n          }\n          getOptionLabel={(option:MinimalOption) => option.label} // display the label\n          getOptionKey={(option:MinimalOption) => option.id}\n          getOptionDisabled={(option:MinimalOption) => option.disabled??false}\n          isOptionEqualToValue={(option:MinimalOption, value) => option.id === value?.id}\n          filterOptions={(options, { inputValue }) => { // filter the options\n            return options.filter(option => {\n              // use the filter key to search\n              const filterKey = option.filterKey.toLowerCase()\n              // split the input value by space and check if all the words are in the filter key\n              const inputVal = inputValue.toLowerCase().split(\" \")\n              // if all the words are in the filter key, return true\n              return inputVal.every(val => filterKey.includes(val))\n            })\n          }}\n\n          renderInput={(params) => {\n            return(\n            <Box ref={params.InputProps.ref} sx={pickerSearchSx}>\n\t\t\t\t\t\t\t<SearchIcon sx={{ fontSize: 18, color: 'var(--picker-text-secondary)', flexShrink: 0 }} />\n              <InputBase\n\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\t\t\tonChange={(event) => setQuery(event.target.value)}\n\t\t\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\t\t\t...params.inputProps,\n\t\t\t\t\t\t\t\t\tvalue: query,\n\t\t\t\t\t\t\t\t\tonBlur:(e: React.FocusEvent<HTMLInputElement>)=>{\n\t\t\t\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n              />\n            </Box>\n          )}} \n          \n          renderGroup={(p)=>{\n\n            return <li key={p.key}>\n              <Box className={`${autocompleteClasses.groupLabel}`} sx={pickerGroupLabelSx}>\n\t\t\t\t\t\t\t\t{p.group === MY_LOCAL_DISABLE_GROUP?\n                <Box component=\"span\" sx={{display:\"flex\",alignItems:\"center\",gap:1}}><DisabledSelectionIcon sx={{ fontSize: 14 }} />{DISABLED_GROUP}</Box>\n                :p.group}\n              </Box>\n\n              <Box component=\"ul\" sx={{padding:0, margin: 0}} className={`${autocompleteClasses.groupUl}`}>{p.children}</Box>\n            </li>\n          }}\n        />\n\t\t\t\t{isAddOptionEnabled ? (\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tborderTop: '1px solid var(--picker-divider)',\n\t\t\t\t\t\t\tpx: 0.75,\n\t\t\t\t\t\t\tpy: 0.5,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tstartIcon={<AddIcon />}\n\t\t\t\t\t\t\tonClick={addOptionHandler}\n\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tjustifyContent: 'flex-start',\n\t\t\t\t\t\t\t\tpx: 1,\n\t\t\t\t\t\t\t\tcolor: 'var(--picker-text-secondary)',\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\tletterSpacing: '0.02em',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tNew option\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Box>\n\t\t\t\t) : null}\n      </PickerPaper>\n\t\t</PickerPopper>\n\t)\n}\n\n/**\n * A popper component for the Autocomplete\n * \n * must be a separate component to avoid re-rendering the popper\n */\nfunction ListSurface({\n  children,\n  ...other\n}: {\n  children?: React.ReactNode\n} & React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <Box {...other} sx={{ boxShadow: 'none', backgroundColor: 'transparent' }}>\n      {children}\n    </Box>\n  )\n}\n\nfunction PopperComponent(props: PopperProps & AutocompletePopperSlotPropsOverrides) {\n  const { children, sx, ...other } = props;\n\n  // Render a simple container instead of a Popper so the consumer can\n  // wrap the Autocomplete in an external Popper. If `sx` is a function we\n  // don't evaluate it here (keep behavior simple and type-safe).\n  const evaluatedSx = typeof sx === 'function' ? {} : sx;\n  const content = typeof children === 'function' ? (children as () => React.ReactNode)() : children;\n\n  return (\n    <Box {...other} sx={evaluatedSx}>\n      {content}\n    </Box>\n  );\n}\n","import type { SxProps, Theme } from '@mui/material/styles'\nimport { styled } from '@mui/material/styles'\nimport { Popper } from '@/ele/Overlay'\nimport { autocompleteClasses } from '@mui/material/Autocomplete'\nimport { Paper } from '@/ele/Paper'\nimport { gitHubPickerRootStyle } from './theme'\n\nexport const PickerPopper = styled(Popper)(({ theme }) => ({\n\t...gitHubPickerRootStyle,\n\twidth: 'var(--w)',\n\tminWidth: 280,\n\tzIndex: theme.zIndex.modal,\n\tfontSize: 13,\n\toverflow: 'hidden',\n\tborderRadius: 14,\n\tborder: '1px solid var(--picker-border)',\n\tbackgroundColor: 'var(--mui-palette-background-paper)',\n\tbackgroundImage: 'none',\n\tboxShadow: 'var(--picker-shadow)',\n\tbackdropFilter: 'none',\n\tWebkitBackdropFilter: 'none',\n\t'--picker-blur': '0px',\n\t'--picker-glass': 'none',\n}))\n\nexport const PickerOptionLi = styled('li')(() => ({\n\t...gitHubPickerRootStyle,\n\t[`.${autocompleteClasses.listbox} &.${autocompleteClasses.option}`]: {\n\t\tpadding: 0,\n\t\tmargin: '2px 6px',\n\t\tborderRadius: 10,\n\t\tminHeight: 0,\n\t},\n\t[`\n\t\t&.${autocompleteClasses.option},\n\t\t&.${autocompleteClasses.option}[aria-selected=\"true\"],\n\t`]: {\n\t\tbackgroundColor: 'transparent',\n\t},\n\t[`\n\t\t&.${autocompleteClasses.option}:hover,\n\t\t&.${autocompleteClasses.option}[aria-selected=\"true\"]:hover,\n\t`]: {\n\t\tbackgroundColor: 'var(--picker-hover-bg)',\n\t},\n\t[`\n\t\t&.${autocompleteClasses.option}.${autocompleteClasses.focused},\n\t\t&.${autocompleteClasses.option}.${autocompleteClasses.focused}[aria-selected=\"true\"]\n\t`]: {\n\t\tbackgroundColor: 'var(--picker-focus-soft)',\n\t},\n\t[`&.${autocompleteClasses.option}[aria-selected=\"true\"]`]: {\n\t\tbackgroundColor: 'var(--picker-focus-soft)',\n\t\tboxShadow: 'inset 0 1px 0 var(--picker-highlight)',\n\t},\n}))\n\nexport const PickerPaper = styled(Paper)({\n\t...gitHubPickerRootStyle,\n\tborderRadius: 14,\n\tborder: 'none',\n\t'--paper-bg': 'transparent',\n\tbackgroundColor: 'transparent',\n\tbackgroundImage: 'none',\n\tboxShadow: 'none',\n\t'&.MuiPaper-root': {\n\t\t'--paper-bg': 'transparent',\n\t\tbackgroundColor: 'transparent',\n\t\tbackgroundImage: 'none',\n\t\tboxShadow: 'none',\n\t\tborder: 'none',\n\t},\n})\n\nexport const pickerSearchSx = {\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tgap: 1,\n\tmx: 1,\n\tmt: 0.5,\n\tmb: 0.75,\n\tpx: 1.25,\n\tpy: 0.5,\n\tborderRadius: 2,\n\tbackgroundColor: 'var(--picker-search-bg)',\n\tborder: '1px solid var(--picker-search-border)',\n\tboxShadow: 'var(--picker-search-shadow)',\n\t'& .MuiInputBase-root': {\n\t\tfontSize: '0.875rem',\n\t\tcolor: 'var(--picker-text)',\n\t},\n\t'& .MuiInputBase-input': {\n\t\tpy: 0.6,\n\t\t'&::placeholder': {\n\t\t\tcolor: 'var(--picker-text-secondary)',\n\t\t\topacity: 0.8,\n\t\t},\n\t},\n} as const satisfies SxProps<Theme>\n\nexport const pickerGroupLabelSx = {\n\tpx: 1.75,\n\tpt: 1.25,\n\tpb: 0.5,\n\tfontSize: '0.66rem',\n\tfontWeight: 700,\n\tletterSpacing: '0.08em',\n\ttextTransform: 'uppercase',\n\tlineHeight: 1.4,\n\tcolor: 'var(--picker-text-secondary)',\n} as const satisfies SxProps<Theme>\n"],"mappings":"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","names":["autocompleteClasses","default","id","default","options","autocompleteClasses"]}

package/dist/TelField-LOGRVZ4I.mjs

@@ -0,0 +1,88 @@
+import {
+  FieldHelperText
+} from "./chunk-MI64T62E.mjs";
+import {
+  Explanation_default,
+  getFieldExplanation,
+  mergeFieldSx
+} from "./chunk-UTVSYS6S.mjs";
+import {
+  TelPhoneInput
+} from "./chunk-OGNGPI3M.mjs";
+import "./chunk-VYD3PDBB.mjs";
+import {
+  MuiFormLabel,
+  default as default3
+} from "./chunk-T4X375IG.mjs";
+import "./chunk-MDAUF7IL.mjs";
+import "./chunk-JIU5GVM7.mjs";
+import "./chunk-4Q54P737.mjs";
+import "./chunk-OP6LKXPA.mjs";
+import "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default2
+} from "./chunk-S6EZVRZC.mjs";
+import "./chunk-FJ6ZGZIA.mjs";
+
+// src/components/compound/UseForm/src/Fields/TelField.tsx
+import { Controller, useFormContext } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TelField = ({ field }) => {
+  const { control, getValues } = useFormContext();
+  const { name, label, required, disabled, sx, size, slotProps, errorMsg, defaultValue } = field;
+  const telSlot = slotProps;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      defaultValue: defaultValue ?? "",
+      render: ({ field: controllerField, fieldState: { error } }) => {
+        const { onChange, value } = controllerField;
+        const helperTextNode = /* @__PURE__ */ jsx(FieldHelperText, { error, errorMsg, helpers: [field.helperText] });
+        return /* @__PURE__ */ jsxs(
+          default3,
+          {
+            disabled,
+            required,
+            error: !!error,
+            fullWidth: true,
+            size: "small",
+            sx: mergeFieldSx(size, sx),
+            children: [
+              /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-start", mb: 0.5 }, children: [
+                /* @__PURE__ */ jsx(MuiFormLabel, { component: "legend", sx: { mr: 1 }, children: label }),
+                /* @__PURE__ */ jsx(default2, { sx: { display: "inline-flex" }, children: /* @__PURE__ */ jsx(Explanation_default, { explanation: getFieldExplanation(field) }) })
+              ] }),
+              /* @__PURE__ */ jsx(default2, { sx: { py: 1, width: "100%" }, children: /* @__PURE__ */ jsx(
+                TelPhoneInput,
+                {
+                  ...telSlot,
+                  value: value ?? "",
+                  onChange: (v) => {
+                    const next = v ?? "";
+                    onChange(next);
+                    field.onChange?.(next, getValues());
+                  },
+                  defaultCountry: telSlot?.defaultCountry,
+                  placeholder: telSlot?.placeholder,
+                  inputProps: {
+                    ...telSlot?.inputProps
+                  },
+                  iconComponent: telSlot?.iconComponent,
+                  disabled,
+                  error: !!error
+                }
+              ) }),
+              helperTextNode
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+export {
+  TelField
+};
+//# sourceMappingURL=TelField-LOGRVZ4I.mjs.map

package/dist/TelField-LOGRVZ4I.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/compound/UseForm/src/Fields/TelField.tsx"],"sourcesContent":["import { Controller, useFormContext } from 'react-hook-form';\nimport { Box } from '@/ele/Box';\nimport { FormControl, FormLabel } from '@/ele/Form';\nimport { FieldHelperText } from '../_utils/helperText';\nimport { FieldConfig, FormTypeMap, InferFormDataType } from '../_utils';\nimport Explanation from './Explanation';\nimport { FIELD_TYPEs } from '../_utils/constants';\nimport type { TelSlotProps } from '../_utils/slotProps';\nimport { TelPhoneInput } from '@/ele/Input/src/TelPhoneInput';\nimport { getFieldExplanation, mergeFieldSx } from '../_utils/helpers';\n\ninterface TelFieldProps<T extends FormTypeMap = FormTypeMap> {\n  field: Extract<FieldConfig<T>, { type: typeof FIELD_TYPEs.tel }>;\n}\n\nexport const TelField = <T extends FormTypeMap = FormTypeMap>({ field }: TelFieldProps<T>) => {\n  const { control, getValues } = useFormContext();\n  const { name, label, required, disabled, sx, size, slotProps, errorMsg, defaultValue } = field;\n\n  const telSlot = slotProps as TelSlotProps | undefined;\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      defaultValue={defaultValue ?? ''}\n      render={({ field: controllerField, fieldState: { error } }) => {\n        const { onChange, value } = controllerField;\n        const helperTextNode = <FieldHelperText error={error} errorMsg={errorMsg} helpers={[field.helperText]} />;\n\n        return (\n          <FormControl\n            disabled={disabled}\n            required={required}\n            error={!!error}\n            fullWidth\n            size=\"small\"\n            sx={mergeFieldSx(size, sx)}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', mb: 0.5 }}>\n              <FormLabel component=\"legend\" sx={{ mr: 1 }}>{label}</FormLabel>\n              <Box sx={{ display: 'inline-flex' }}>\n                <Explanation explanation={getFieldExplanation(field)} />\n              </Box>\n            </Box>\n\n            <Box sx={{ py: 1, width: '100%' }}>\n              <TelPhoneInput\n                {...telSlot}\n                value={value ?? ''}\n                onChange={(v) => {\n                  const next = v ?? '';\n                  onChange(next);\n                  (field).onChange?.(next, getValues() as InferFormDataType<T>);\n                }}\n                defaultCountry={telSlot?.defaultCountry}\n                placeholder={telSlot?.placeholder}\n                inputProps={{\n                  ...telSlot?.inputProps,\n                }}\n                iconComponent={telSlot?.iconComponent}\n                disabled={disabled}\n                error={!!error}\n              />\n            </Box>\n\n            {helperTextNode}\n          </FormControl>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,sBAAsB;AA4BZ,cAWnB,YAXmB;AAbxB,IAAM,WAAW,CAAsC,EAAE,MAAM,MAAwB;AAC5F,QAAM,EAAE,SAAS,UAAU,IAAI,eAAe;AAC9C,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,IAAI,MAAM,WAAW,UAAU,aAAa,IAAI;AAEzF,QAAM,UAAU;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc,gBAAgB;AAAA,MAC9B,QAAQ,CAAC,EAAE,OAAO,iBAAiB,YAAY,EAAE,MAAM,EAAE,MAAM;AAC7D,cAAM,EAAE,UAAU,MAAM,IAAI;AAC5B,cAAM,iBAAiB,oBAAC,mBAAgB,OAAc,UAAoB,SAAS,CAAC,MAAM,UAAU,GAAG;AAEvG,eACE;AAAA,UAACA;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,OAAO,CAAC,CAAC;AAAA,YACT,WAAS;AAAA,YACT,MAAK;AAAA,YACL,IAAI,aAAa,MAAM,EAAE;AAAA,YAEzB;AAAA,mCAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,cAAc,IAAI,IAAI,GACtF;AAAA,oCAAC,gBAAU,WAAU,UAAS,IAAI,EAAE,IAAI,EAAE,GAAI,iBAAM;AAAA,gBACpD,oBAACA,UAAA,EAAI,IAAI,EAAE,SAAS,cAAc,GAChC,8BAAC,uBAAY,aAAa,oBAAoB,KAAK,GAAG,GACxD;AAAA,iBACF;AAAA,cAEA,oBAACA,UAAA,EAAI,IAAI,EAAE,IAAI,GAAG,OAAO,OAAO,GAC9B;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,OAAO,SAAS;AAAA,kBAChB,UAAU,CAAC,MAAM;AACf,0BAAM,OAAO,KAAK;AAClB,6BAAS,IAAI;AACb,oBAAC,MAAO,WAAW,MAAM,UAAU,CAAyB;AAAA,kBAC9D;AAAA,kBACA,gBAAgB,SAAS;AAAA,kBACzB,aAAa,SAAS;AAAA,kBACtB,YAAY;AAAA,oBACV,GAAG,SAAS;AAAA,kBACd;AAAA,kBACA,eAAe,SAAS;AAAA,kBACxB;AAAA,kBACA,OAAO,CAAC,CAAC;AAAA;AAAA,cACX,GACF;AAAA,cAEC;AAAA;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["default"]}