@spaced-out/ui-design-system 0.0.3-beta.0 → 0.0.3-beta.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 0.0.3-beta.1 (2022-11-21)
+
+
+### Bug Fixes
+
+* rename showBackdrop in modal to hideBackdrop and releated changes ([303c4d8](https://github.com/Spaced-Out/ui-design-system/commit/303c4d8c95aa75219cf5eca682ebdecf53c27e7c))
+
 ### 0.0.3-beta.0 (2022-11-21)
 
 

package/lib/components/Checkbox/CheckboxGroup.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CheckboxGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Text = require("../Text/Text.js");
+var _Text = require("../Text/Text");
 var _CheckboxGroupModule = _interopRequireDefault(require("./CheckboxGroup.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/components/Checkbox/CheckboxGroup.js.flow

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import type {GroupAlign} from '../../types/common';
 import classify from '../../utils/classify';
-import {BodySmall} from '../Text/Text.js';
+import {BodySmall} from '../Text/Text';
 
 import css from './CheckboxGroup.module.css';
 

package/lib/components/Checkbox/index.js

@@ -15,5 +15,5 @@ Object.defineProperty(exports, "CheckboxGroup", {
     return _CheckboxGroup.CheckboxGroup;
   }
 });
-var _Checkbox = require("./Checkbox.js");
-var _CheckboxGroup = require("./CheckboxGroup.js");
+var _Checkbox = require("./Checkbox");
+var _CheckboxGroup = require("./CheckboxGroup");

package/lib/components/Checkbox/index.js.flow

@@ -1,3 +1,3 @@
 //@flow strict
-export {Checkbox} from './Checkbox.js';
-export {CheckboxGroup} from './CheckboxGroup.js';
+export {Checkbox} from './Checkbox';
+export {CheckboxGroup} from './CheckboxGroup';

package/lib/components/Dialog/Dialog.js

@@ -101,7 +101,7 @@ const Dialog = _ref5 => {
   let {
     children,
     isOpen = false,
-    showBackdrop = true,
+    hideBackdrop = false,
     onClose,
     tapOutsideToClose = false,
     iconName = '',
@@ -111,7 +111,7 @@ const Dialog = _ref5 => {
   return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
     isOpen: isOpen,
     onClose: onClose,
-    showBackdrop: showBackdrop,
+    hideBackdrop: hideBackdrop,
     tapOutsideToClose: tapOutsideToClose
   }, restDialogProps, {
     classNames: {

package/lib/components/Dialog/Dialog.js.flow

@@ -130,7 +130,7 @@ export const DialogFooter = ({children}: DialogFooterProps): React.Node => (
 export const Dialog = ({
   children,
   isOpen = false,
-  showBackdrop = true,
+  hideBackdrop = false,
   onClose,
   tapOutsideToClose = false,
   iconName = '',
@@ -140,7 +140,7 @@ export const Dialog = ({
   <Modal
     isOpen={isOpen}
     onClose={onClose}
-    showBackdrop={showBackdrop}
+    hideBackdrop={hideBackdrop}
     tapOutsideToClose={tapOutsideToClose}
     {...restDialogProps}
     classNames={{

package/lib/components/Dialog/index.js

@@ -33,4 +33,4 @@ Object.defineProperty(exports, "DialogHeader", {
     return _Dialog.DialogHeader;
   }
 });
-var _Dialog = require("./Dialog.js");
+var _Dialog = require("./Dialog");

package/lib/components/Dialog/index.js.flow

@@ -4,11 +4,11 @@ export type {
   DialogFooterProps,
   DialogHeaderProps,
   DialogProps,
-} from './Dialog.js';
+} from './Dialog';
 export {
   Dialog,
   DIALOG_SEMANTIC,
   DialogBody,
   DialogFooter,
   DialogHeader,
-} from './Dialog.js';
+} from './Dialog';

package/lib/components/Icon/index.js

@@ -21,5 +21,5 @@ Object.defineProperty(exports, "Icon", {
     return _Icon.Icon;
   }
 });
-var _ClickableIcon = require("./ClickableIcon.js");
+var _ClickableIcon = require("./ClickableIcon");
 var _Icon = require("./Icon");

package/lib/components/Icon/index.js.flow

@@ -1,6 +1,6 @@
 // @flow strict
 
 export type {CloseIconProps} from './ClickableIcon';
-export {ClickableIcon, CloseIcon} from './ClickableIcon.js';
+export {ClickableIcon, CloseIcon} from './ClickableIcon';
 export type {IconProps, IconSize, IconType} from './Icon';
 export {Icon} from './Icon';

package/lib/components/Modal/Modal.js

@@ -10,8 +10,8 @@ var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Button = require("../Button/Button.js");
-var _Truncate = require("../Truncate/Truncate.js");
+var _Button = require("../Button/Button");
+var _Truncate = require("../Truncate/Truncate");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -68,7 +68,7 @@ const Modal = _ref4 => {
     children,
     isOpen = false,
     onClose,
-    showBackdrop = false,
+    hideBackdrop = false,
     removeWhenClosed = true,
     tapOutsideToClose = true,
     initialFocus = -1
@@ -146,7 +146,7 @@ const Modal = _ref4 => {
     }, classNames?.container)
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ModalModule.default.backdrop, {
-      [_ModalModule.default.darkBackdrop]: showBackdrop
+      [_ModalModule.default.darkBackdrop]: !hideBackdrop
     }, classNames?.backdrop),
     onClick: onBackdropClick
   }), /*#__PURE__*/React.createElement("div", {

package/lib/components/Modal/Modal.js.flow

@@ -13,8 +13,8 @@ import {
 import useMountTransition from '../../hooks/useMountTransition';
 import {motionDurationNormal} from '../../styles/variables/_motion';
 import classify from '../../utils/classify';
-import {Button} from '../Button/Button.js';
-import {Truncate} from '../Truncate/Truncate.js';
+import {Button} from '../Button/Button';
+import {Truncate} from '../Truncate/Truncate';
 
 import css from './Modal.module.css';
 
@@ -30,7 +30,7 @@ export type ModalProps = {
   children?: React.Node,
   isOpen?: boolean,
   onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  showBackdrop?: boolean,
+  hideBackdrop?: boolean,
   removeWhenClosed?: boolean,
   tapOutsideToClose?: boolean,
   initialFocus?: number,
@@ -100,7 +100,7 @@ export const Modal = ({
   children,
   isOpen = false,
   onClose,
-  showBackdrop = false,
+  hideBackdrop = false,
   removeWhenClosed = true,
   tapOutsideToClose = true,
   initialFocus = -1,
@@ -195,7 +195,7 @@ export const Modal = ({
           className={classify(
             css.backdrop,
             {
-              [css.darkBackdrop]: showBackdrop,
+              [css.darkBackdrop]: !hideBackdrop,
             },
             classNames?.backdrop,
           )}

package/lib/components/Modal/index.js

@@ -9,4 +9,22 @@ Object.defineProperty(exports, "Modal", {
     return _Modal.Modal;
   }
 });
-var _Modal = require("./Modal.js");
+Object.defineProperty(exports, "ModalBody", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalBody;
+  }
+});
+Object.defineProperty(exports, "ModalFooter", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalFooter;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalHeader;
+  }
+});
+var _Modal = require("./Modal");

package/lib/components/Modal/index.js.flow

@@ -1,3 +1,8 @@
 //@flow strict
-export type {ModalProps} from './Modal.js';
-export {Modal} from './Modal.js';
+export type {
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalHeaderProps,
+  ModalProps,
+} from './Modal';
+export {Modal, ModalBody, ModalFooter, ModalHeader} from './Modal';

package/lib/components/Panel/Panel.js

@@ -61,12 +61,14 @@ const Panel = _ref4 => {
     size = 'medium',
     anchor = 'left',
     onClose,
+    hideBackdrop = true,
     ...restPanelProps
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
   return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
     isOpen: isOpen,
-    onClose: onClose
+    onClose: onClose,
+    hideBackdrop: hideBackdrop
   }, restPanelProps, {
     classNames: {
       container: (0, _classify.default)(_PanelModule.default.panelContainer, {

package/lib/components/Panel/Panel.js.flow

@@ -80,6 +80,7 @@ export const Panel = ({
   size = 'medium',
   anchor = 'left',
   onClose,
+  hideBackdrop = true,
   ...restPanelProps
 }: PanelProps): React.Node => {
   const isTransitioning = useMountTransition(
@@ -91,6 +92,7 @@ export const Panel = ({
     <Modal
       isOpen={isOpen}
       onClose={onClose}
+      hideBackdrop={hideBackdrop}
       {...restPanelProps}
       classNames={{
         container: classify(css.panelContainer, {

package/lib/components/Panel/index.js

@@ -27,4 +27,4 @@ Object.defineProperty(exports, "PanelHeader", {
     return _Panel.PanelHeader;
   }
 });
-var _Panel = require("./Panel.js");
+var _Panel = require("./Panel");

package/lib/components/Panel/index.js.flow

@@ -6,5 +6,5 @@ export type {
   PanelHeaderProps,
   PanelProps,
   PanelSize,
-} from './Panel.js';
-export {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel.js';
+} from './Panel';
+export {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel';

package/lib/components/RadioButton/RadioGroup.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Text = require("../Text/Text.js");
+var _Text = require("../Text/Text");
 var _RadioGroupModule = _interopRequireDefault(require("./RadioGroup.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/lib/components/RadioButton/RadioGroup.js.flow

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import type {GroupAlign} from '../../types/common';
 import classify from '../../utils/classify';
-import {BodySmall} from '../Text/Text.js';
+import {BodySmall} from '../Text/Text';
 
 import css from './RadioGroup.module.css';
 

package/lib/components/RadioButton/index.js

@@ -15,5 +15,5 @@ Object.defineProperty(exports, "RadioGroup", {
     return _RadioGroup.RadioGroup;
   }
 });
-var _RadioButton = require("./RadioButton.js");
-var _RadioGroup = require("./RadioGroup.js");
+var _RadioButton = require("./RadioButton");
+var _RadioGroup = require("./RadioGroup");

package/lib/components/RadioButton/index.js.flow

@@ -1,3 +1,3 @@
 //@flow strict
-export {RadioButton} from './RadioButton.js';
-export {RadioGroup} from './RadioGroup.js';
+export {RadioButton} from './RadioButton';
+export {RadioGroup} from './RadioGroup';

package/lib/components/Toggle/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "Toggle", {
     return _Toggle.Toggle;
   }
 });
-var _Toggle = require("./Toggle.js");
+var _Toggle = require("./Toggle");

package/lib/components/Toggle/index.js.flow

@@ -1,2 +1,2 @@
 //@flow strict
-export {Toggle} from './Toggle.js';
+export {Toggle} from './Toggle';

package/lib/components/Truncate/Truncate.js

@@ -14,37 +14,43 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const BaseTruncate = _ref => {
   let {
     children,
-    line = 1
+    line = 1,
+    showFullTextOnHover = false
   } = _ref;
   return /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp),
     style: {
       WebkitLineClamp: `${line}`
-    }
+    },
+    title: showFullTextOnHover ? children : ''
   }, children);
 };
 exports.BaseTruncate = BaseTruncate;
 const Truncate = _ref2 => {
   let {
     children,
-    line = 1
+    line = 1,
+    showFullTextOnHover = false
   } = _ref2;
   const arrayChildren = React.Children.toArray(children);
   if (arrayChildren.length) {
     const child = arrayChildren[0];
     if ( /*#__PURE__*/React.isValidElement(child)) {
       const {
-        className
+        className,
+        children
       } = child.props;
       return /*#__PURE__*/React.cloneElement(child, {
         className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className),
         style: {
           WebkitLineClamp: `${line}`
-        }
+        },
+        title: showFullTextOnHover ? children : ''
       });
     }
     return /*#__PURE__*/React.createElement(BaseTruncate, {
-      line: line
+      line: line,
+      showFullTextOnHover: showFullTextOnHover
     }, children);
   }
   return null;

package/lib/components/Truncate/Truncate.js.flow

@@ -10,33 +10,45 @@ import css from './Truncate.module.css';
 export type TruncateProps = {
   children?: React.Node,
   line?: number,
+  showFullTextOnHover?: boolean,
 };
 
 export const BaseTruncate = ({
   children,
   line = 1,
+  showFullTextOnHover = false,
 }: TruncateProps): React.Node => (
   <span
     className={classify(css.truncateLineClamp)}
     style={{WebkitLineClamp: `${line}`}}
+    title={showFullTextOnHover ? children : ''}
   >
     {children}
   </span>
 );
 
-export const Truncate = ({children, line = 1}: TruncateProps): React.Node => {
+export const Truncate = ({
+  children,
+  line = 1,
+  showFullTextOnHover = false,
+}: TruncateProps): React.Node => {
   const arrayChildren = React.Children.toArray(children);
   if (arrayChildren.length) {
     const child = arrayChildren[0];
     if (React.isValidElement(child)) {
-      const {className} = child.props;
+      const {className, children} = child.props;
 
       return React.cloneElement(child, {
         className: classify(css.truncateLineClamp, className),
         style: {WebkitLineClamp: `${line}`},
+        title: showFullTextOnHover ? children : '',
       });
     }
-    return <BaseTruncate line={line}>{children}</BaseTruncate>;
+    return (
+      <BaseTruncate line={line} showFullTextOnHover={showFullTextOnHover}>
+        {children}
+      </BaseTruncate>
+    );
   }
   return null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.3-beta.0",
+  "version": "0.0.3-beta.1",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {