@servicetitan/dte-unlayer 0.96.0 → 0.98.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/dte-unlayer",
-  "version": "0.96.0",
+  "version": "0.98.0",
   "description": "",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

package/src/display-conditions/DisplayConditionModal.tsx

@@ -13,7 +13,6 @@ const BEHAVIOR_OPTIONS = [
     { label: 'Hide', value: 'hide' },
 ] as const;
 const NUMERIC_VALUE_RE = /^-?(?:\d+\.?\d*|\.\d+)$/;
-
 type BehaviorOption = (typeof BEHAVIOR_OPTIONS)[number];
 
 export interface DisplayConditionModalProps {
@@ -45,12 +44,9 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
     }, []);
 
     const handleClose = useCallback(() => {
-        if (request) {
-            request.done(request.data ?? null);
-            setRequest(null);
-        }
+        setRequest(null);
         setIsOpen(false);
-    }, [request]);
+    }, []);
 
     const handleSave = useCallback(() => {
         if (!request) {
@@ -147,6 +143,7 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
                     style={{
                         maxHeight: MODAL_CONTENT_MAX_HEIGHT,
                         overflowY: 'auto',
+                        paddingRight: 8,
                         width: '100%',
                     }}
                 >
@@ -163,15 +160,15 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
                         </Text>
                         <Flex
                             direction="row"
-                            alignItems="center"
+                            alignItems="flex-end"
                             gap="3"
                             style={{ flexWrap: 'wrap' }}
                         >
-                            <Text size="small" subdued variant="body">
+                            <Text size="small" subdued variant="body" style={{ paddingBottom: 10 }}>
                                 Select to show or hide selected component.
                             </Text>
                             <div style={{ width: 160 }}>
-                                <Combobox
+                                <Combobox.Select
                                     {...({ disableClearSelection: true } as object)}
                                     itemToKey={(item: BehaviorOption | null) => item?.value ?? ''}
                                     itemToString={(item: BehaviorOption | null) =>
@@ -181,10 +178,7 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
                                     selectedItem={selectedBehavior}
                                     onChange={handleBehaviorChange}
                                 >
-                                    <Combobox.SelectTrigger
-                                        label="Behavior"
-                                        placeholder="Select..."
-                                    />
+                                    <Combobox.SelectTrigger label="" placeholder="Select..." />
                                     <Combobox.Content>
                                         {({ items }: { items: BehaviorOption[] }) => (
                                             <Combobox.List>
@@ -200,30 +194,35 @@ export const DisplayConditionModal = (props: DisplayConditionModalProps) => {
                                             </Combobox.List>
                                         )}
                                     </Combobox.Content>
-                                </Combobox>
+                                </Combobox.Select>
                             </div>
                         </Flex>
                     </Flex>
-                    <ConditionGroupsSection
-                        dataPointOptions={dataPointOptions}
-                        groups={state.groups}
-                        onAddGroup={addGroup}
-                        onRemoveGroup={removeGroup}
-                        onUpdateGroup={updateGroup}
-                    />
-                    {!canSave && (
-                        <Text size="small" subdued variant="body">
-                            Complete each condition before saving. Data point and value are
-                            required, and numeric fields must contain a valid number.
-                        </Text>
-                    )}
+                    <div style={{ padding: 8 }}>
+                        <ConditionGroupsSection
+                            dataPointOptions={dataPointOptions}
+                            groups={state.groups}
+                            onAddGroup={addGroup}
+                            onRemoveGroup={removeGroup}
+                            onUpdateGroup={updateGroup}
+                        />
+                    </div>
                 </Flex>
             </Dialog.Content>
             <Dialog.Footer sticky>
-                <Dialog.CancelButton onClick={handleClose}>Cancel</Dialog.CancelButton>
-                <Button appearance="primary" disabled={!canSave} onClick={handleSave}>
-                    Save Changes
-                </Button>
+                <Flex
+                    justifyContent="flex-end"
+                    alignItems="center"
+                    gap="3"
+                    style={{ width: '100%' }}
+                >
+                    <Button appearance="secondary" onClick={handleClose}>
+                        Cancel
+                    </Button>
+                    <Button appearance="primary" disabled={!canSave} onClick={handleSave}>
+                        Save Changes
+                    </Button>
+                </Flex>
             </Dialog.Footer>
         </Dialog>,
         portalTarget,