@lax-wp/design-system 0.3.115 → 0.4.0

package/dist/components/shortcut-kbd/ShortcutKbd.d.ts

@@ -0,0 +1,26 @@
+export type ShortcutKbdVariant = 'dark' | 'light';
+export interface ShortcutKbdProps {
+    /** Array of keyboard shortcut keys to display (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */
+    shortcuts: string[];
+    /** Visual variant of the keyboard shortcuts */
+    variant?: ShortcutKbdVariant;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * ShortcutKbd component displays keyboard shortcuts with OS-aware key symbols.
+ *
+ * Keys like 'Meta', 'Alt', 'Shift', 'Control', 'Enter', 'Delete' are automatically
+ * converted to OS-specific symbols (e.g., ⌘ on macOS, Ctrl on Windows/Linux).
+ *
+ * @example
+ * ```tsx
+ * // macOS: Shows "⌘ S", Windows: Shows "Ctrl S"
+ * <ShortcutKbd shortcuts={['Meta', 'S']} />
+ *
+ * // Light variant for dark backgrounds
+ * <ShortcutKbd shortcuts={['Meta', 'Shift', 'P']} variant="light" />
+ * ```
+ */
+export declare const ShortcutKbd: ({ shortcuts, variant, className, }: ShortcutKbdProps) => import("react/jsx-runtime").JSX.Element;
+export default ShortcutKbd;

package/dist/components/shortcut-kbd/index.d.ts

@@ -0,0 +1,2 @@
+export { ShortcutKbd, default } from './ShortcutKbd';
+export type { ShortcutKbdProps, ShortcutKbdVariant } from './ShortcutKbd';

package/dist/index.d.ts

@@ -210,3 +210,5 @@ export { Comparison, ComparisonContext, ComparisonProvider, COMPARISON_LAYOUT, D
 export type { ComparisonProps, TComparisonContext, ComparisonProviderProps, ILayoutItem, ExitIconProps, LayoutOneIconProps, LayoutTwoIconProps, LayoutThreeIconProps, } from "./components/data-display/comparison";
 export { FormulaInput, convertToPills, convertFromPills, getCursorPosition, setCursorPosition, getTextBeforeCursor, getCursorCoordinates, insertTextAtCursor, } from "./components/forms/formula-input";
 export type { FormulaInputProps } from "./components/forms/formula-input";
+export { ShortcutKbd } from "./components/shortcut-kbd";
+export type { ShortcutKbdProps, ShortcutKbdVariant } from "./components/shortcut-kbd";

package/dist/index.es.js

@@ -64733,7 +64733,30 @@ const ContentEditable = /* @__PURE__ */ getDefaultExportFromCjs(reactContentedit
     ] }),
     J && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { className: "text-error-500", size: "extra-small", variant: "medium", appearance: "custom", children: J }) })
   ] });
-}, FormulaInput$1 = React__default.memo(FormulaInput);
+}, FormulaInput$1 = React__default.memo(FormulaInput), ShortcutKbd = ({
+  shortcuts: e,
+  variant: t = "dark",
+  className: n
+}) => {
+  const s = useOS() === "macos", o = useMemo(() => e.map((V) => {
+    const W = SHORTCUT_KEY_MAP[V];
+    return W ? s ? W.macos : W.other : V;
+  }), [e, s]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn$1("flex flex-1 gap-1", n), children: o.map((V, W) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "kbd",
+    {
+      className: cn$1(
+        "flex items-center rounded-[3px] px-1.5 py-[2px] min-w-[26px] justify-center text-xs font-medium",
+        {
+          "bg-neutral-800 text-white": t === "dark",
+          "bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-white": t === "light"
+        }
+      ),
+      children: V
+    },
+    W
+  )) });
+};
 export {
   AccessDeniedModal,
   Accordion,
@@ -64859,6 +64882,7 @@ export {
   SHORTCUT_KEY_MAP,
   SearchBar,
   SelectField,
+  ShortcutKbd,
   Sidebar$1 as Sidebar,
   Skeleton,
   StatusColorMapping,

package/dist/index.umd.js

@@ -384,4 +384,4 @@ function print() { __p += __j.call(arguments, '') }
   line-height: 20px;
   color: var(--color-primary-500);
   cursor: pointer;
-`,convertToPills=e=>{if(typeof e!="string")return String(e);let t=e;t=t.replace(/<span[^>]*>([^<]+)<\/span>/g,"$1"),t=t.replace(/<p[^>]*>([^<]+)<\/p>/g,"$1");const n=/{{[^}]+}}/g,a=t.match(n);return a?.length&&(t=a.reduce((s,o)=>{const V=o.slice(2,-2).trim();return s.replace(o,`<mark contenteditable="false" style="${badgeStyle}" data-value="${V}">${V}</mark>`)},t)),t},convertFromPills=e=>{if(typeof e!="string")return String(e);let t=e;t=t.replace(/&nbsp;/g," "),t=t.replace(/<span[^>]*>([^<]+)<\/span>/g,"$1"),t=t.replace(/<p[^>]*>([^<]+)<\/p>/g,"$1"),t=t.replace(/&lt;/g,"<"),t=t.replace(/&gt;/g,">");const n=/<mark\s+contenteditable="false"\s+style="[^"]+"\s+data-value="([^"]+)">([^<]+)<\/mark>/g,a=t.match(n);return a?.length&&(t=a.reduce((s,o)=>{const V=o.match(/data-value="([^"]+)"/)?.[1]||"";return s.replace(o,`{{${V}}}`)},t)),!t.trim()||t==="<br>"?"":t},getCursorPosition=()=>{const e=window.getSelection();return!e||e.rangeCount===0?0:e.getRangeAt(0).startOffset},setCursorPosition=(e,t)=>{const n=(a,s)=>{if(a.nodeType===3)if(a.textContent&&a.textContent.length>=s){const o=document.createRange(),V=window.getSelection();return o.setStart(a,s),o.collapse(!0),V?.removeAllRanges(),V?.addRange(o),-1}else return s-(a.textContent?.length||0);else{for(const o of Array.from(a.childNodes))if(s=n(o,s),s===-1)return-1;return s}};n(e,t)},getTextBeforeCursor=()=>{const e=window.getSelection();if(!e||e.rangeCount===0)return"";const t=e.getRangeAt(0),n=t.cloneRange();let a=t.startContainer;for(;a&&a.nodeType!==1;)a=a.parentNode;return a?(n.selectNodeContents(a),n.setEnd(t.startContainer,t.startOffset),n.toString()):""},getCursorCoordinates=()=>{const e=window.getSelection();if(!e||e.rangeCount===0)return{x:0,y:0};const a=e.getRangeAt(0).getClientRects()[0];return a?{x:a.left,y:a.top+a.height}:{x:0,y:0}},insertTextAtCursor=e=>{const t=window.getSelection();if(!t||t.rangeCount===0)return;const n=t.getRangeAt(0);n.deleteContents();const a=document.createTextNode(e);n.insertNode(a),n.setStartAfter(a),n.collapse(!0),t.removeAllRanges(),t.addRange(n)},FormulaInput=({value:e="",onChange:t,onFocus:n,onBlur:a,label:s,id:o,required:V,tooltip:W,placeholder:G,disabled:U,errorMessage:J,width:K="100%",suggestions:ne=[],showRawValue:ce=!1})=>{const me=React.useRef(null),ue=React.useRef(null),ve=React.useRef(null),pe=React.useRef([]),xe=React.useRef(null),[ge,ye]=React.useState(!1),[Re,Se]=React.useState(""),[Ae,Te]=React.useState(0),[Le,$e]=React.useState(ce),We=React.useRef(ge),ke=React.useRef([]),Ge=React.useRef(Ae),Be=React.useRef(e);React.useEffect(()=>{We.current=ge},[ge]),React.useEffect(()=>{Ge.current=Ae},[Ae]),React.useEffect(()=>{Be.current=e},[e]),useOutsideClick({ref:ve,handler:()=>{ge&&ye(!1)}});const Pe=React.useMemo(()=>{if(!Re)return ne;const Ze=Re.toLowerCase();return ne.filter(Ke=>Ke.toLowerCase().includes(Ze))},[ne,Re]);React.useEffect(()=>{ke.current=Pe},[Pe]),React.useEffect(()=>{Te(0)},[Pe]),React.useEffect(()=>{ge&&pe.current[Ae]&&pe.current[Ae]?.scrollIntoView({block:"nearest",behavior:"smooth"})},[Ae,ge]),React.useEffect(()=>{if(ge&&ue.current&&ve.current)return xe.current=createPopper(ue.current,ve.current,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"flip",options:{fallbackPlacements:["top-start","bottom-start"]}},{name:"preventOverflow",options:{boundary:"viewport",padding:8}},{name:"offset",options:{offset:[0,4]}}]}),()=>{xe.current&&(xe.current.destroy(),xe.current=null)}},[ge]);const je=React.useCallback(Ze=>{const Ke=convertFromPills(Ze.target.value);t(Ke);const rt=getTextBeforeCursor(),et=rt.lastIndexOf("@");if(et!==-1){const Qe=rt.slice(et+1);Qe.includes(" ")?ye(!1):(Se(Qe),ye(!0))}else ye(!1)},[t]),Ne=React.useCallback(()=>{me.current&&(me.current.isFocused=!0),n?.()},[n]),_e=React.useCallback(Ze=>{me.current&&(me.current.isFocused=!1);const Ke=Ze.relatedTarget;Ke&&ve.current?.contains(Ke)||(setTimeout(()=>{ye(!1)},200),a?.())},[a]),Ie=React.useCallback(Ze=>{if(!me.current)return;const Ke=Be.current,rt=Ke.lastIndexOf("@");if(rt!==-1){const Qe=Ke.slice(rt+1).search(/\s/);let lt;Qe===-1?lt=Ke.length:lt=rt+1+Qe;const it=Ke.slice(0,rt),at=Ke.slice(lt),pt=`${it}{{${Ze}}}${at}`;t(pt),ye(!1),Se(""),setTimeout(()=>{me.current?.focus()},0)}},[t]),Fe=React.useCallback(Ze=>{const Ke=We.current,rt=ke.current,et=Ge.current;if(Ze.key==="Enter"){Ze.preventDefault(),Ze.stopPropagation(),Ke&&rt.length>0&&rt[et]&&Ie(rt[et]);return}if(Ke&&rt.length>0){const{key:Qe}=Ze;if(["ArrowDown","ArrowUp","Escape","Tab"].includes(Qe))switch(Ze.preventDefault(),Ze.stopPropagation(),Qe){case"ArrowDown":Te(lt=>lt<rt.length-1?lt+1:lt);break;case"ArrowUp":Te(lt=>lt>0?lt-1:0);break;case"Escape":ye(!1);break;case"Tab":rt[et]&&Ie(rt[et]);break}}},[Ie]),Ue=React.useCallback(Ze=>{Ze.preventDefault();const Ke=Ze.clipboardData.getData("text/plain");document.execCommand("insertText",!1,Ke)},[]),Je=React.useMemo(()=>Le?e:convertToPills(e),[e,Le]);return jsxRuntimeExports.jsxs("div",{className:"w-full",children:[s&&jsxRuntimeExports.jsxs("div",{className:"text-xs font-medium text-gray-600 inline-flex items-center gap-1 font-inter text-left whitespace-nowrap flex-wrap",children:[jsxRuntimeExports.jsxs(Typography,{variant:"medium",size:"extra-small",appearance:"subtitle",children:[s,V&&s?jsxRuntimeExports.jsx(Required,{}):null]}),W&&jsxRuntimeExports.jsx(Tooltip,{placement:"top",title:W,children:jsxRuntimeExports.jsx("div",{className:"cursor-pointer",children:jsxRuntimeExports.jsx(HelpIcon,{})})})]}),jsxRuntimeExports.jsxs("div",{className:"relative",ref:ue,children:[e?.trim()?null:jsxRuntimeExports.jsx("div",{className:"absolute top-0 left-0 w-full h-full text-gray-400 flex items-center cursor-text px-3 z-50",onClick:()=>me.current?.focus(),children:jsxRuntimeExports.jsx(Typography,{size:"extra-small",variant:"medium",children:G})}),jsxRuntimeExports.jsxs("div",{className:"relative",children:[jsxRuntimeExports.jsx(ContentEditable,{innerRef:me,className:cn$1("min-h-[42px] rounded-lg p-2.5","text-sm font-inter block font-medium border text-gray-900 dark:text-white whitespace-normal break-words text-left",U?"bg-neutral-100 dark:bg-black-800":"bg-white dark:bg-black-800",!U&&"pr-[60px]",J?"!border-error-500":"border-gray-300 dark:border-black-600 focus:ring-blue-500 focus:border-blue-500","cursor-text"),style:{width:K,wordBreak:"break-word"},html:Je,onChange:U?()=>null:je,onFocus:Ne,onBlur:_e,onKeyDownCapture:Fe,onKeyDown:Fe,onPaste:Ue,disabled:U,id:o}),!U&&jsxRuntimeExports.jsx("div",{className:"absolute right-0 top-0 bottom-0 flex items-center align-middle justify-center p-3 gap-2",children:jsxRuntimeExports.jsx(IconButton,{tooltip:Le?"Show Formatted":"Show Raw Value",variant:"ghost",onClick:()=>$e(!Le),children:Le?jsxRuntimeExports.jsx(AllIcons.VisibilityOutlined,{sx:{fontSize:18}}):jsxRuntimeExports.jsx(AllIcons.VisibilityOffOutlined,{sx:{fontSize:18}})})})]}),ge&&Pe.length>0&&ReactDOM.createPortal(jsxRuntimeExports.jsx("div",{ref:ve,className:"z-[3000] bg-white dark:bg-black-800 border border-gray-300 dark:border-black-600 rounded-lg shadow-lg max-h-60 overflow-y-auto min-w-[200px]",onMouseDown:Ze=>{Ze.preventDefault()},children:Pe.map((Ze,Ke)=>jsxRuntimeExports.jsx("div",{ref:rt=>pe.current[Ke]=rt,className:cn$1("px-3 py-2 cursor-pointer text-sm font-inter",Ke===Ae?"bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300":"hover:bg-gray-100 dark:hover:bg-black-700 text-gray-900 dark:text-white"),onClick:()=>Ie(Ze),onMouseEnter:()=>Te(Ke),children:Ze},Ze))}),document.body)]}),J&&jsxRuntimeExports.jsx("div",{className:"pt-1",children:jsxRuntimeExports.jsx(Typography,{className:"text-error-500",size:"extra-small",variant:"medium",appearance:"custom",children:J})})]})},FormulaInput$1=React.memo(FormulaInput);exports.AccessDeniedModal=AccessDeniedModal,exports.Accordion=Accordion,exports.AddKeyModal=AddKeyModal,exports.ArchivedIcon=ArchivedIcon,exports.Badge=Badge,exports.Banner=Banner,exports.BaseInputField=BaseInputField,exports.BaseInputFieldDefault=BaseInputField,exports.BreadCrumb=BreadCrumb,exports.BreadCrumbItem=BreadCrumbItem,exports.Button=Button,exports.ButtonGroup=ButtonGroup,exports.ButtonThreeDots=ButtonThreeDots,exports.COMPARISON_LAYOUT=COMPARISON_LAYOUT,exports.COUNTRY_CODES=COUNTRY_CODES,exports.CURRENCIES=CURRENCIES,exports.CURRENCY_SYMBOLS=CURRENCY_SYMBOLS,exports.Card=Card,exports.CardHeaderView=CardHeaderView,exports.CardMain=CardMain,exports.CheckCircle=CheckCircle,exports.CheckSmallIcon=CheckSmallIcon,exports.Checkbox=Checkbox,exports.CheckboxComponent=CheckboxComponent,exports.CircularProgressBar=CircularProgressBar,exports.CodeEditor=CodeEditor,exports.CodeEditorTabs=Tabs,exports.ColorPicker=ColorPicker,exports.ComingSoonIcon=ComingSoonIcon,exports.Comparison=Comparison,exports.ComparisonContext=ComparisonContext,exports.ComparisonProvider=ComparisonProvider,exports.ComponentLoader=ComponentLoader,exports.ConfirmPopUp=ConfirmPopUp$1,exports.ConfirmationModal=ConfirmationModal,exports.ContextMenu=ContextMenu,exports.CreatableSelectField=CreatableSelectField,exports.CurrencyInputField=CurrencyInputField,exports.CustomScrollbar=CustomScrollbar,exports.CustomizableSelectField=CustomizableSelectField,exports.DEFAULT_COMPARISON_LAYOUTS=DEFAULT_COMPARISON_LAYOUTS,exports.DataTypeBadgeClass=DataTypeBadgeClass,exports.DataTypeIcon=DataTypeIcon,exports.DateRange=DateRange,exports.DateRange2=DateRange2,exports.DateTimeField=DateTimeField,exports.DebounceInputField=DebounceInputField,exports.DeleteModal=DeleteModal,exports.DiffViewer=DiffViewer,exports.Divider=Divider,exports.DragOverlay=DragOverlay,exports.DraggableContainer=DraggableContainer,exports.Drawer=Drawer,exports.DynamicDataInput=DynamicDataInput,exports.DynamicDataInputField=DynamicDataInputField,exports.DynamicDataModal=DynamicDataModal,exports.DynamicItemsCell=DynamicItemsCell,exports.EditIcon=EditIcon,exports.EmptyBarChartData=EmptyBarChartData,exports.EmptyCardListChartData=EmptyCardListChartData,exports.EmptyContentChartData=EmptyContentChartData,exports.EmptyCountWidgetData=EmptyCountWidgetData,exports.EmptyDonutChartData=EmptyDonutChartData,exports.EmptyEvent=EmptyEvent,exports.EmptyPieChatData=EmptyPieChatData,exports.EmptyTableWidgetData=EmptyTableWidgetData,exports.EmptyTimelineChartData=EmptyTimelineChartData,exports.ErrorModal=ErrorModal,exports.ExitIcon=ExitIcon,exports.FieldOptions=FieldOptions,exports.FileUpload=FileUpload,exports.FloatingBar=FloatingBar,exports.FloatingElementWrapper=FloatingElementWrapper,exports.FormulaInput=FormulaInput$1,exports.Helmet=Helmet,exports.HelmetTitle=HelmetTitle,exports.IconButton=IconButton,exports.IconPicker=IconPicker,exports.IconRenderer=IconRenderer,exports.InProgress=InProgress,exports.InfoAlert=InfoAlert,exports.InfoCircleIcon=InfoCircleIcon,exports.InlineDiffHighlighter=InlineDiffHighlighter,exports.InputField=InputField,exports.JsonGrid=JsonGridViewer,exports.JsonGridBulkFloatingBar=JsonGridBulkFloatingBar,exports.JsonGridCore=JsonGridCore,exports.JsonGridDataType=DataType,exports.JsonGridDataTypeOptions=DataTypeOptions,exports.JsonGridViewer=JsonGridViewer,exports.JsonGridViewerContextProvider=JsonGridViewerContextProvider,exports.JsonValueDisplay=JsonValueDisplay,exports.LabelValue=LabelValue,exports.LaxIcon=LaxIcon,exports.LayoutOneIcon=LayoutOneIcon,exports.LayoutThreeIcon=LayoutThreeIcon,exports.LayoutTwoIcon=LayoutTwoIcon,exports.LinearProgressBar=LinearProgressBar,exports.LogoLoader=LogoLoader,exports.LottieAnimation=LottieAnimation,exports.MODES=MODES,exports.MasterDataInputField=MasterDataInputField,exports.MdInput=MdInput,exports.Modal=Modal,exports.MultiFileUpload=MultiFileUpload,exports.NameInitialLogo=NameInitialLogo,exports.NestedJsonGrid=NestedJsonGrid,exports.NoDataFound=NoDataFound,exports.NoDataFoundWidgets=NoDataFoundWidgets,exports.NumberInputField=NumberInputField,exports.OPEN_DURATION_MS=OPEN_DURATION_MS$1,exports.OptionButton=OptionButton,exports.PageContainer=PageContainer,exports.PageNotFound=PageNotFound,exports.PdfViewer=PdfViewer,exports.PercentageInputField=PercentageInputField,exports.PermissionWrapper=PermissionWrapper,exports.PersonIcon=PersonIcon,exports.Popper=Popper,exports.Radio=Radio,exports.ResizableSidebar=ResizableSidebar,exports.SHORTCUT_KEY_MAP=SHORTCUT_KEY_MAP,exports.SearchBar=SearchBar,exports.SelectField=SelectField,exports.Sidebar=Sidebar$1,exports.Skeleton=Skeleton,exports.StatusColorMapping=StatusColorMapping,exports.StatusInfoRow=StatusInfoRow,exports.Stepper=Stepper,exports.TOGGLE_LABEL_DIRECTION=TOGGLE_LABEL_DIRECTION,exports.TabContent=TabContent,exports.Tag=Tag,exports.Text=Text,exports.TextAreaField=TextAreaField,exports.TextField=TextField,exports.TextWithStrike=TextWithStrike,exports.Toast=Toast,exports.Toggle=Toggle,exports.Tooltip=Tooltip,exports.Typography=Typography,exports.UNIVERSAL_DATETIME_FORMAT=UNIVERSAL_DATETIME_FORMAT,exports.UNIVERSAL_DATE_FORMAT=UNIVERSAL_DATE_FORMAT,exports.UnsavedChangesModal=UnsavedChangesModal,exports.UserAvatar=UserAvatar,exports.UserAvatarPopper=UserAvatarPopper,exports.UserNotFound=UserNotFound,exports.UserProfilePic=UserProfilePic,exports.comparisonParseToIds=parseToIds,exports.convertFromPills=convertFromPills,exports.convertToPills=convertToPills,exports.countryNameFromCode=countryNameFromCode,exports.detectOS=detectOS,exports.filterTopLevelPaths=filterTopLevelPaths$1,exports.filterVisibleItems=filterVisibleItems,exports.filteredOptions=filteredOptions,exports.formatBooleanValue=formatBooleanValue,exports.formatCurrency=formatCurrency,exports.formatDate=formatDate,exports.getCurrentSelectValue=getCurrentSelectValue,exports.getCursorCoordinates=getCursorCoordinates,exports.getCursorPosition=getCursorPosition,exports.getFlagComponent=getFlagComponent,exports.getFlagComponentRectangle=getFlagComponentRectangle,exports.getFlagComponentRectangleMd=getFlagComponentRectangleMd,exports.getFlagComponentRectangleSm=getFlagComponentRectangleSm,exports.getFlagComponentSm=getFlagComponentSm,exports.getInitials=getInitials,exports.getTextBeforeCursor=getTextBeforeCursor,exports.gridLayoutItems=gridLayoutItems,exports.insertTextAtCursor=insertTextAtCursor,exports.isISODateString=isISODateString,exports.isMacOS=isMacOS,exports.jsonGridFilterTopLevelPaths=filterTopLevelPaths,exports.jsonGridGetDataType=getDataType,exports.jsonGridParseJson=parseJson,exports.mapShortcutKey=mapShortcutKey,exports.mapShortcutKeys=mapShortcutKeys,exports.monacoManager=monacoManager,exports.parseJson=parseJson$1,exports.randomHexString=randomHexString,exports.setCursorPosition=setCursorPosition,exports.systemMessages=systemMessages,exports.toast=toast,exports.useCheckboxSelection=useCheckboxSelection,exports.useDynamicPosition=useDynamicPosition,exports.useEventListener=useEventListener,exports.useIsomorphicLayoutEffect=useIsomorphicLayoutEffect$1,exports.useJsonGridViewerContext=useJsonGridViewerContext,exports.useModalContainer=useModalContainer,exports.useOS=useOS,exports.useOutsideClick=useOutsideClick,exports.usePythonSyntax=usePythonSyntax,exports.useScrollToTop=useScrollToTop,exports.useShortcutKeys=useShortcutKeys,exports.useTheme=useTheme,exports.userAvatarSizeClasses=sizeClasses,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})});
+`,convertToPills=e=>{if(typeof e!="string")return String(e);let t=e;t=t.replace(/<span[^>]*>([^<]+)<\/span>/g,"$1"),t=t.replace(/<p[^>]*>([^<]+)<\/p>/g,"$1");const n=/{{[^}]+}}/g,a=t.match(n);return a?.length&&(t=a.reduce((s,o)=>{const V=o.slice(2,-2).trim();return s.replace(o,`<mark contenteditable="false" style="${badgeStyle}" data-value="${V}">${V}</mark>`)},t)),t},convertFromPills=e=>{if(typeof e!="string")return String(e);let t=e;t=t.replace(/&nbsp;/g," "),t=t.replace(/<span[^>]*>([^<]+)<\/span>/g,"$1"),t=t.replace(/<p[^>]*>([^<]+)<\/p>/g,"$1"),t=t.replace(/&lt;/g,"<"),t=t.replace(/&gt;/g,">");const n=/<mark\s+contenteditable="false"\s+style="[^"]+"\s+data-value="([^"]+)">([^<]+)<\/mark>/g,a=t.match(n);return a?.length&&(t=a.reduce((s,o)=>{const V=o.match(/data-value="([^"]+)"/)?.[1]||"";return s.replace(o,`{{${V}}}`)},t)),!t.trim()||t==="<br>"?"":t},getCursorPosition=()=>{const e=window.getSelection();return!e||e.rangeCount===0?0:e.getRangeAt(0).startOffset},setCursorPosition=(e,t)=>{const n=(a,s)=>{if(a.nodeType===3)if(a.textContent&&a.textContent.length>=s){const o=document.createRange(),V=window.getSelection();return o.setStart(a,s),o.collapse(!0),V?.removeAllRanges(),V?.addRange(o),-1}else return s-(a.textContent?.length||0);else{for(const o of Array.from(a.childNodes))if(s=n(o,s),s===-1)return-1;return s}};n(e,t)},getTextBeforeCursor=()=>{const e=window.getSelection();if(!e||e.rangeCount===0)return"";const t=e.getRangeAt(0),n=t.cloneRange();let a=t.startContainer;for(;a&&a.nodeType!==1;)a=a.parentNode;return a?(n.selectNodeContents(a),n.setEnd(t.startContainer,t.startOffset),n.toString()):""},getCursorCoordinates=()=>{const e=window.getSelection();if(!e||e.rangeCount===0)return{x:0,y:0};const a=e.getRangeAt(0).getClientRects()[0];return a?{x:a.left,y:a.top+a.height}:{x:0,y:0}},insertTextAtCursor=e=>{const t=window.getSelection();if(!t||t.rangeCount===0)return;const n=t.getRangeAt(0);n.deleteContents();const a=document.createTextNode(e);n.insertNode(a),n.setStartAfter(a),n.collapse(!0),t.removeAllRanges(),t.addRange(n)},FormulaInput=({value:e="",onChange:t,onFocus:n,onBlur:a,label:s,id:o,required:V,tooltip:W,placeholder:G,disabled:U,errorMessage:J,width:K="100%",suggestions:ne=[],showRawValue:ce=!1})=>{const me=React.useRef(null),ue=React.useRef(null),ve=React.useRef(null),pe=React.useRef([]),xe=React.useRef(null),[ge,ye]=React.useState(!1),[Re,Se]=React.useState(""),[Ae,Te]=React.useState(0),[Le,$e]=React.useState(ce),We=React.useRef(ge),ke=React.useRef([]),Ge=React.useRef(Ae),Be=React.useRef(e);React.useEffect(()=>{We.current=ge},[ge]),React.useEffect(()=>{Ge.current=Ae},[Ae]),React.useEffect(()=>{Be.current=e},[e]),useOutsideClick({ref:ve,handler:()=>{ge&&ye(!1)}});const Pe=React.useMemo(()=>{if(!Re)return ne;const Ze=Re.toLowerCase();return ne.filter(Ke=>Ke.toLowerCase().includes(Ze))},[ne,Re]);React.useEffect(()=>{ke.current=Pe},[Pe]),React.useEffect(()=>{Te(0)},[Pe]),React.useEffect(()=>{ge&&pe.current[Ae]&&pe.current[Ae]?.scrollIntoView({block:"nearest",behavior:"smooth"})},[Ae,ge]),React.useEffect(()=>{if(ge&&ue.current&&ve.current)return xe.current=createPopper(ue.current,ve.current,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"flip",options:{fallbackPlacements:["top-start","bottom-start"]}},{name:"preventOverflow",options:{boundary:"viewport",padding:8}},{name:"offset",options:{offset:[0,4]}}]}),()=>{xe.current&&(xe.current.destroy(),xe.current=null)}},[ge]);const je=React.useCallback(Ze=>{const Ke=convertFromPills(Ze.target.value);t(Ke);const rt=getTextBeforeCursor(),et=rt.lastIndexOf("@");if(et!==-1){const Qe=rt.slice(et+1);Qe.includes(" ")?ye(!1):(Se(Qe),ye(!0))}else ye(!1)},[t]),Ne=React.useCallback(()=>{me.current&&(me.current.isFocused=!0),n?.()},[n]),_e=React.useCallback(Ze=>{me.current&&(me.current.isFocused=!1);const Ke=Ze.relatedTarget;Ke&&ve.current?.contains(Ke)||(setTimeout(()=>{ye(!1)},200),a?.())},[a]),Ie=React.useCallback(Ze=>{if(!me.current)return;const Ke=Be.current,rt=Ke.lastIndexOf("@");if(rt!==-1){const Qe=Ke.slice(rt+1).search(/\s/);let lt;Qe===-1?lt=Ke.length:lt=rt+1+Qe;const it=Ke.slice(0,rt),at=Ke.slice(lt),pt=`${it}{{${Ze}}}${at}`;t(pt),ye(!1),Se(""),setTimeout(()=>{me.current?.focus()},0)}},[t]),Fe=React.useCallback(Ze=>{const Ke=We.current,rt=ke.current,et=Ge.current;if(Ze.key==="Enter"){Ze.preventDefault(),Ze.stopPropagation(),Ke&&rt.length>0&&rt[et]&&Ie(rt[et]);return}if(Ke&&rt.length>0){const{key:Qe}=Ze;if(["ArrowDown","ArrowUp","Escape","Tab"].includes(Qe))switch(Ze.preventDefault(),Ze.stopPropagation(),Qe){case"ArrowDown":Te(lt=>lt<rt.length-1?lt+1:lt);break;case"ArrowUp":Te(lt=>lt>0?lt-1:0);break;case"Escape":ye(!1);break;case"Tab":rt[et]&&Ie(rt[et]);break}}},[Ie]),Ue=React.useCallback(Ze=>{Ze.preventDefault();const Ke=Ze.clipboardData.getData("text/plain");document.execCommand("insertText",!1,Ke)},[]),Je=React.useMemo(()=>Le?e:convertToPills(e),[e,Le]);return jsxRuntimeExports.jsxs("div",{className:"w-full",children:[s&&jsxRuntimeExports.jsxs("div",{className:"text-xs font-medium text-gray-600 inline-flex items-center gap-1 font-inter text-left whitespace-nowrap flex-wrap",children:[jsxRuntimeExports.jsxs(Typography,{variant:"medium",size:"extra-small",appearance:"subtitle",children:[s,V&&s?jsxRuntimeExports.jsx(Required,{}):null]}),W&&jsxRuntimeExports.jsx(Tooltip,{placement:"top",title:W,children:jsxRuntimeExports.jsx("div",{className:"cursor-pointer",children:jsxRuntimeExports.jsx(HelpIcon,{})})})]}),jsxRuntimeExports.jsxs("div",{className:"relative",ref:ue,children:[e?.trim()?null:jsxRuntimeExports.jsx("div",{className:"absolute top-0 left-0 w-full h-full text-gray-400 flex items-center cursor-text px-3 z-50",onClick:()=>me.current?.focus(),children:jsxRuntimeExports.jsx(Typography,{size:"extra-small",variant:"medium",children:G})}),jsxRuntimeExports.jsxs("div",{className:"relative",children:[jsxRuntimeExports.jsx(ContentEditable,{innerRef:me,className:cn$1("min-h-[42px] rounded-lg p-2.5","text-sm font-inter block font-medium border text-gray-900 dark:text-white whitespace-normal break-words text-left",U?"bg-neutral-100 dark:bg-black-800":"bg-white dark:bg-black-800",!U&&"pr-[60px]",J?"!border-error-500":"border-gray-300 dark:border-black-600 focus:ring-blue-500 focus:border-blue-500","cursor-text"),style:{width:K,wordBreak:"break-word"},html:Je,onChange:U?()=>null:je,onFocus:Ne,onBlur:_e,onKeyDownCapture:Fe,onKeyDown:Fe,onPaste:Ue,disabled:U,id:o}),!U&&jsxRuntimeExports.jsx("div",{className:"absolute right-0 top-0 bottom-0 flex items-center align-middle justify-center p-3 gap-2",children:jsxRuntimeExports.jsx(IconButton,{tooltip:Le?"Show Formatted":"Show Raw Value",variant:"ghost",onClick:()=>$e(!Le),children:Le?jsxRuntimeExports.jsx(AllIcons.VisibilityOutlined,{sx:{fontSize:18}}):jsxRuntimeExports.jsx(AllIcons.VisibilityOffOutlined,{sx:{fontSize:18}})})})]}),ge&&Pe.length>0&&ReactDOM.createPortal(jsxRuntimeExports.jsx("div",{ref:ve,className:"z-[3000] bg-white dark:bg-black-800 border border-gray-300 dark:border-black-600 rounded-lg shadow-lg max-h-60 overflow-y-auto min-w-[200px]",onMouseDown:Ze=>{Ze.preventDefault()},children:Pe.map((Ze,Ke)=>jsxRuntimeExports.jsx("div",{ref:rt=>pe.current[Ke]=rt,className:cn$1("px-3 py-2 cursor-pointer text-sm font-inter",Ke===Ae?"bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300":"hover:bg-gray-100 dark:hover:bg-black-700 text-gray-900 dark:text-white"),onClick:()=>Ie(Ze),onMouseEnter:()=>Te(Ke),children:Ze},Ze))}),document.body)]}),J&&jsxRuntimeExports.jsx("div",{className:"pt-1",children:jsxRuntimeExports.jsx(Typography,{className:"text-error-500",size:"extra-small",variant:"medium",appearance:"custom",children:J})})]})},FormulaInput$1=React.memo(FormulaInput),ShortcutKbd=({shortcuts:e,variant:t="dark",className:n})=>{const s=useOS()==="macos",o=React.useMemo(()=>e.map(V=>{const W=SHORTCUT_KEY_MAP[V];return W?s?W.macos:W.other:V}),[e,s]);return jsxRuntimeExports.jsx("div",{className:cn$1("flex flex-1 gap-1",n),children:o.map((V,W)=>jsxRuntimeExports.jsx("kbd",{className:cn$1("flex items-center rounded-[3px] px-1.5 py-[2px] min-w-[26px] justify-center text-xs font-medium",{"bg-neutral-800 text-white":t==="dark","bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-white":t==="light"}),children:V},W))})};exports.AccessDeniedModal=AccessDeniedModal,exports.Accordion=Accordion,exports.AddKeyModal=AddKeyModal,exports.ArchivedIcon=ArchivedIcon,exports.Badge=Badge,exports.Banner=Banner,exports.BaseInputField=BaseInputField,exports.BaseInputFieldDefault=BaseInputField,exports.BreadCrumb=BreadCrumb,exports.BreadCrumbItem=BreadCrumbItem,exports.Button=Button,exports.ButtonGroup=ButtonGroup,exports.ButtonThreeDots=ButtonThreeDots,exports.COMPARISON_LAYOUT=COMPARISON_LAYOUT,exports.COUNTRY_CODES=COUNTRY_CODES,exports.CURRENCIES=CURRENCIES,exports.CURRENCY_SYMBOLS=CURRENCY_SYMBOLS,exports.Card=Card,exports.CardHeaderView=CardHeaderView,exports.CardMain=CardMain,exports.CheckCircle=CheckCircle,exports.CheckSmallIcon=CheckSmallIcon,exports.Checkbox=Checkbox,exports.CheckboxComponent=CheckboxComponent,exports.CircularProgressBar=CircularProgressBar,exports.CodeEditor=CodeEditor,exports.CodeEditorTabs=Tabs,exports.ColorPicker=ColorPicker,exports.ComingSoonIcon=ComingSoonIcon,exports.Comparison=Comparison,exports.ComparisonContext=ComparisonContext,exports.ComparisonProvider=ComparisonProvider,exports.ComponentLoader=ComponentLoader,exports.ConfirmPopUp=ConfirmPopUp$1,exports.ConfirmationModal=ConfirmationModal,exports.ContextMenu=ContextMenu,exports.CreatableSelectField=CreatableSelectField,exports.CurrencyInputField=CurrencyInputField,exports.CustomScrollbar=CustomScrollbar,exports.CustomizableSelectField=CustomizableSelectField,exports.DEFAULT_COMPARISON_LAYOUTS=DEFAULT_COMPARISON_LAYOUTS,exports.DataTypeBadgeClass=DataTypeBadgeClass,exports.DataTypeIcon=DataTypeIcon,exports.DateRange=DateRange,exports.DateRange2=DateRange2,exports.DateTimeField=DateTimeField,exports.DebounceInputField=DebounceInputField,exports.DeleteModal=DeleteModal,exports.DiffViewer=DiffViewer,exports.Divider=Divider,exports.DragOverlay=DragOverlay,exports.DraggableContainer=DraggableContainer,exports.Drawer=Drawer,exports.DynamicDataInput=DynamicDataInput,exports.DynamicDataInputField=DynamicDataInputField,exports.DynamicDataModal=DynamicDataModal,exports.DynamicItemsCell=DynamicItemsCell,exports.EditIcon=EditIcon,exports.EmptyBarChartData=EmptyBarChartData,exports.EmptyCardListChartData=EmptyCardListChartData,exports.EmptyContentChartData=EmptyContentChartData,exports.EmptyCountWidgetData=EmptyCountWidgetData,exports.EmptyDonutChartData=EmptyDonutChartData,exports.EmptyEvent=EmptyEvent,exports.EmptyPieChatData=EmptyPieChatData,exports.EmptyTableWidgetData=EmptyTableWidgetData,exports.EmptyTimelineChartData=EmptyTimelineChartData,exports.ErrorModal=ErrorModal,exports.ExitIcon=ExitIcon,exports.FieldOptions=FieldOptions,exports.FileUpload=FileUpload,exports.FloatingBar=FloatingBar,exports.FloatingElementWrapper=FloatingElementWrapper,exports.FormulaInput=FormulaInput$1,exports.Helmet=Helmet,exports.HelmetTitle=HelmetTitle,exports.IconButton=IconButton,exports.IconPicker=IconPicker,exports.IconRenderer=IconRenderer,exports.InProgress=InProgress,exports.InfoAlert=InfoAlert,exports.InfoCircleIcon=InfoCircleIcon,exports.InlineDiffHighlighter=InlineDiffHighlighter,exports.InputField=InputField,exports.JsonGrid=JsonGridViewer,exports.JsonGridBulkFloatingBar=JsonGridBulkFloatingBar,exports.JsonGridCore=JsonGridCore,exports.JsonGridDataType=DataType,exports.JsonGridDataTypeOptions=DataTypeOptions,exports.JsonGridViewer=JsonGridViewer,exports.JsonGridViewerContextProvider=JsonGridViewerContextProvider,exports.JsonValueDisplay=JsonValueDisplay,exports.LabelValue=LabelValue,exports.LaxIcon=LaxIcon,exports.LayoutOneIcon=LayoutOneIcon,exports.LayoutThreeIcon=LayoutThreeIcon,exports.LayoutTwoIcon=LayoutTwoIcon,exports.LinearProgressBar=LinearProgressBar,exports.LogoLoader=LogoLoader,exports.LottieAnimation=LottieAnimation,exports.MODES=MODES,exports.MasterDataInputField=MasterDataInputField,exports.MdInput=MdInput,exports.Modal=Modal,exports.MultiFileUpload=MultiFileUpload,exports.NameInitialLogo=NameInitialLogo,exports.NestedJsonGrid=NestedJsonGrid,exports.NoDataFound=NoDataFound,exports.NoDataFoundWidgets=NoDataFoundWidgets,exports.NumberInputField=NumberInputField,exports.OPEN_DURATION_MS=OPEN_DURATION_MS$1,exports.OptionButton=OptionButton,exports.PageContainer=PageContainer,exports.PageNotFound=PageNotFound,exports.PdfViewer=PdfViewer,exports.PercentageInputField=PercentageInputField,exports.PermissionWrapper=PermissionWrapper,exports.PersonIcon=PersonIcon,exports.Popper=Popper,exports.Radio=Radio,exports.ResizableSidebar=ResizableSidebar,exports.SHORTCUT_KEY_MAP=SHORTCUT_KEY_MAP,exports.SearchBar=SearchBar,exports.SelectField=SelectField,exports.ShortcutKbd=ShortcutKbd,exports.Sidebar=Sidebar$1,exports.Skeleton=Skeleton,exports.StatusColorMapping=StatusColorMapping,exports.StatusInfoRow=StatusInfoRow,exports.Stepper=Stepper,exports.TOGGLE_LABEL_DIRECTION=TOGGLE_LABEL_DIRECTION,exports.TabContent=TabContent,exports.Tag=Tag,exports.Text=Text,exports.TextAreaField=TextAreaField,exports.TextField=TextField,exports.TextWithStrike=TextWithStrike,exports.Toast=Toast,exports.Toggle=Toggle,exports.Tooltip=Tooltip,exports.Typography=Typography,exports.UNIVERSAL_DATETIME_FORMAT=UNIVERSAL_DATETIME_FORMAT,exports.UNIVERSAL_DATE_FORMAT=UNIVERSAL_DATE_FORMAT,exports.UnsavedChangesModal=UnsavedChangesModal,exports.UserAvatar=UserAvatar,exports.UserAvatarPopper=UserAvatarPopper,exports.UserNotFound=UserNotFound,exports.UserProfilePic=UserProfilePic,exports.comparisonParseToIds=parseToIds,exports.convertFromPills=convertFromPills,exports.convertToPills=convertToPills,exports.countryNameFromCode=countryNameFromCode,exports.detectOS=detectOS,exports.filterTopLevelPaths=filterTopLevelPaths$1,exports.filterVisibleItems=filterVisibleItems,exports.filteredOptions=filteredOptions,exports.formatBooleanValue=formatBooleanValue,exports.formatCurrency=formatCurrency,exports.formatDate=formatDate,exports.getCurrentSelectValue=getCurrentSelectValue,exports.getCursorCoordinates=getCursorCoordinates,exports.getCursorPosition=getCursorPosition,exports.getFlagComponent=getFlagComponent,exports.getFlagComponentRectangle=getFlagComponentRectangle,exports.getFlagComponentRectangleMd=getFlagComponentRectangleMd,exports.getFlagComponentRectangleSm=getFlagComponentRectangleSm,exports.getFlagComponentSm=getFlagComponentSm,exports.getInitials=getInitials,exports.getTextBeforeCursor=getTextBeforeCursor,exports.gridLayoutItems=gridLayoutItems,exports.insertTextAtCursor=insertTextAtCursor,exports.isISODateString=isISODateString,exports.isMacOS=isMacOS,exports.jsonGridFilterTopLevelPaths=filterTopLevelPaths,exports.jsonGridGetDataType=getDataType,exports.jsonGridParseJson=parseJson,exports.mapShortcutKey=mapShortcutKey,exports.mapShortcutKeys=mapShortcutKeys,exports.monacoManager=monacoManager,exports.parseJson=parseJson$1,exports.randomHexString=randomHexString,exports.setCursorPosition=setCursorPosition,exports.systemMessages=systemMessages,exports.toast=toast,exports.useCheckboxSelection=useCheckboxSelection,exports.useDynamicPosition=useDynamicPosition,exports.useEventListener=useEventListener,exports.useIsomorphicLayoutEffect=useIsomorphicLayoutEffect$1,exports.useJsonGridViewerContext=useJsonGridViewerContext,exports.useModalContainer=useModalContainer,exports.useOS=useOS,exports.useOutsideClick=useOutsideClick,exports.usePythonSyntax=usePythonSyntax,exports.useScrollToTop=useScrollToTop,exports.useShortcutKeys=useShortcutKeys,exports.useTheme=useTheme,exports.userAvatarSizeClasses=sizeClasses,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.3.115",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",