@tcn/ui-core - npm Package Compare versions

Comparing version 0.4.13 to 0.4.17

dist/click_away_listener.js

@@ -34,3 +34,3 @@ import React, { useEffect, useCallback, useRef } from 'react';
     const nodeRef = useRef(null);
-    const startedActionWithinElementRef = useRef(false);
+    const startedActionWithinElementRef = useRef(true);
     const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];
@@ -37,0 +37,0 @@ const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];

dist/click_away_listener.stories.d.ts

@@ -8,1 +8,2 @@ import React from 'react';
 export declare function OtherRefChecks(): React.JSX.Element;
+export declare function MountOnFocus(): React.JSX.Element;

dist/click_away_listener.stories.js

@@ -59,2 +59,30 @@ import React, { useRef, useState } from 'react';
 }
+export function MountOnFocus() {
+    const [show, setShow] = useState(false);
+    const redRef = useRef(null);
+    const blueRef = useRef(null);
+    const refs = [redRef, blueRef];
+    const [message, setMessage] = useState('');
+    return (React.createElement("div", null,
+        React.createElement("input", { placeholder: "Click Here", onFocus: () => {
+                setShow(true);
+            } }),
+        show && (React.createElement(ClickAwayListener, { refs: refs, onClickAway: () => {
+                setMessage('Clicked Outside');
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '80%',
+                    boxShadow: '0 0 15px rgba(0,0,0,0.25)',
+                    borderRadius: '20px',
+                    display: 'inline-grid',
+                    placeItems: 'center center',
+                    backgroundColor: '#f1f1f1',
+                } },
+                message,
+                "\u00A0")))));
+}
 //# sourceMappingURL=click_away_listener.stories.js.map

dist/typography/body_text.d.ts

@@ -16,4 +16,4 @@ import React from 'react';
     selectable?: boolean;
-    wordBreak?: boolean;
+    breakWords?: boolean;
 }
-export declare function BodyText({ variant, emphasis, contrast, color, children, className, style, padStart, padEnd, padBottom, padTop, pad, selectable, wordBreak, }: BodyTextProps): React.JSX.Element;
+export declare function BodyText({ variant, emphasis, contrast, color, children, className, style, padStart, padEnd, padBottom, padTop, pad, selectable, breakWords, }: BodyTextProps): React.JSX.Element;

dist/typography/body_text.js

 import classnames from 'classnames';
 import React from 'react';
 import styles from './body_text.module.css';
-export function BodyText({ variant = 'medium', emphasis = 'normal', contrast = 'normal', color, children, className, style = {}, padStart, padEnd, padBottom, padTop, pad, selectable = false, wordBreak = false, }) {
+export function BodyText({ variant = 'medium', emphasis = 'normal', contrast = 'normal', color, children, className, style = {}, padStart, padEnd, padBottom, padTop, pad, selectable = false, breakWords = false, }) {
     if (pad) {
@@ -23,4 +23,4 @@ style.padding = pad;
     }
-    return (React.createElement("div", { "data-contrast": contrast, "data-emphasis": emphasis, "data-selectable": selectable, className: classnames(styles['body-text'], className), style: style, "data-variant": variant, "data-word-break": wordBreak }, children));
+    return (React.createElement("div", { "data-contrast": contrast, "data-emphasis": emphasis, "data-selectable": selectable, className: classnames(styles['body-text'], className), style: style, "data-variant": variant, "data-word-break": breakWords }, children));
 }
 //# sourceMappingURL=body_text.js.map

package.json

 {
   "name": "@tcn/ui-core",
-  "version": "0.4.13",
+  "version": "0.4.17",
   "type": "module",
@@ -5,0 +5,0 @@ "description": "Core Utilities for TCN UI.",

No alert changes

Improved metrics

Total package byte prevSize

73805

increased by5.06%

Lines of code

1255

increased by15.67%

No dependency changes