@spaced-out/ui-design-system 0.0.49 → 0.0.51

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.51](https://github.com/spaced-out/ui-design-system/compare/v0.0.50...v0.0.51) (2023-03-20)
+
+
+### Features
+
+* text highlighting now supports array of string ([bc7604f](https://github.com/spaced-out/ui-design-system/commit/bc7604fc552ec1e61275d93f792ea9a8267279a5))
+
+
+### Bug Fixes
+
+* button right icon only type fix ([#81](https://github.com/spaced-out/ui-design-system/issues/81)) ([3e8b819](https://github.com/spaced-out/ui-design-system/commit/3e8b819be701fd31746a944b7be32ed739dfd632))
+* updated picker usage ([9344611](https://github.com/spaced-out/ui-design-system/commit/934461138f750c2e748c1be146204350cfad9041))
+
+### [0.0.50](https://github.com/spaced-out/ui-design-system/compare/v0.0.49...v0.0.50) (2023-03-13)
+
+
+### Bug Fixes
+
+* classnames for footer in dialog panel and modal and ref to submenuitem ([#80](https://github.com/spaced-out/ui-design-system/issues/80)) ([aba3660](https://github.com/spaced-out/ui-design-system/commit/aba3660917928d55fc1209ddb76602713a6888c2))
+* classNames for modal and panel ([2cbb16e](https://github.com/spaced-out/ui-design-system/commit/2cbb16eba7818b526903e21b4458567caef1b2ba))
+
 ### [0.0.49](https://github.com/spaced-out/ui-design-system/compare/v0.0.48...v0.0.49) (2023-03-13)
 
 

package/README.md

@@ -89,7 +89,7 @@ CSS use:
 JS use:
 
 ```js
-import size2 from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
+import {size2} from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
 import * as SIZES from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
 ```
 

package/lib/components/Button/Button.js

@@ -104,7 +104,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     name: iconLeftName || iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
-    type: iconLeftType || iconRightType,
+    type: iconLeftName ? iconLeftType : iconRightType,
     className: classNames?.icon
   }) :
   // has icon _and_ child

package/lib/components/Button/Button.js.flow

@@ -153,7 +153,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                 name={iconLeftName || iconRightName}
                 color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
                 size={size === 'medium' ? 'medium' : 'small'}
-                type={iconLeftType || iconRightType}
+                type={iconLeftName ? iconLeftType : iconRightType}
                 className={classNames?.icon}
               />
             ) : (

package/lib/components/Dialog/Dialog.js

@@ -91,12 +91,12 @@ exports.DialogBody = DialogBody;
 const DialogFooter = _ref4 => {
   let {
     children,
-    className
+    classNames
   } = _ref4;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_DialogModule.default.dialogFooter, className)
+    className: (0, _classify.default)(_DialogModule.default.dialogFooter, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.dialogFooterActions
+    className: (0, _classify.default)(_DialogModule.default.dialogFooterActions, classNames?.actions)
   }, children)));
 };
 exports.DialogFooter = DialogFooter;
@@ -109,6 +109,7 @@ const Dialog = _ref5 => {
     tapOutsideToClose = false,
     iconName = '',
     semantic = 'neutral',
+    classNames,
     ...restDialogProps
   } = _ref5;
   return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
@@ -118,7 +119,9 @@ const Dialog = _ref5 => {
     tapOutsideToClose: tapOutsideToClose
   }, restDialogProps, {
     classNames: {
-      content: (0, _classify.default)(_DialogModule.default.dialog)
+      content: (0, _classify.default)(_DialogModule.default.dialog, classNames?.content),
+      container: (0, _classify.default)(classNames?.container),
+      backdrop: (0, _classify.default)(classNames?.backdrop)
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: _DialogModule.default.topBlock

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

@@ -11,6 +11,11 @@ import {Modal} from '../Modal';
 import css from './Dialog.module.css';
 
 
+type FooterClassNames = $ReadOnly<{
+  wrapper?: string,
+  actions?: string,
+}>;
+
 export const DIALOG_SEMANTIC = Object.freeze({
   neutral: 'neutral',
   success: 'success',
@@ -28,7 +33,7 @@ export type DialogHeaderProps = {
 
 export type DialogFooterProps = {
   children?: React.Node,
-  className?: string,
+  classNames?: FooterClassNames,
 };
 
 export type DialogBodyProps = {
@@ -131,12 +136,14 @@ export const DialogBody = ({
 
 export const DialogFooter = ({
   children,
-  className,
+  classNames,
 }: DialogFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={classify(css.dialogFooter, className)}>
-        <div className={css.dialogFooterActions}>{children}</div>
+      <div className={classify(css.dialogFooter, classNames?.wrapper)}>
+        <div className={classify(css.dialogFooterActions, classNames?.actions)}>
+          {children}
+        </div>
       </div>
     )}
   </>
@@ -150,6 +157,7 @@ export const Dialog = ({
   tapOutsideToClose = false,
   iconName = '',
   semantic = 'neutral',
+  classNames,
   ...restDialogProps
 }: DialogProps): React.Node => (
   <Modal
@@ -159,7 +167,9 @@ export const Dialog = ({
     tapOutsideToClose={tapOutsideToClose}
     {...restDialogProps}
     classNames={{
-      content: classify(css.dialog),
+      content: classify(css.dialog, classNames?.content),
+      container: classify(classNames?.container),
+      backdrop: classify(classNames?.backdrop),
     }}
   >
     <div className={css.topBlock}>

package/lib/components/Modal/Modal.js

@@ -51,12 +51,12 @@ exports.ModalBody = ModalBody;
 const ModalFooter = _ref3 => {
   let {
     children,
-    className
+    classNames
   } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ModalModule.default.modalFooter, className)
+    className: (0, _classify.default)(_ModalModule.default.modalFooter, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement("div", {
-    className: _ModalModule.default.modalFooterActions
+    className: (0, _classify.default)(_ModalModule.default.modalFooterActions, classNames?.actions)
   }, children)));
 };
 exports.ModalFooter = ModalFooter;

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

@@ -25,6 +25,11 @@ type ClassNames = $ReadOnly<{
   backdrop?: string,
 }>;
 
+type FooterClassNames = $ReadOnly<{
+  wrapper?: string,
+  actions?: string,
+}>;
+
 export type ModalProps = {
   classNames?: ClassNames,
   children?: React.Node,
@@ -45,7 +50,7 @@ export type ModalHeaderProps = {
 
 export type ModalFooterProps = {
   children?: React.Node,
-  className?: string,
+  classNames?: FooterClassNames,
 };
 
 export type ModalBodyProps = {
@@ -87,12 +92,14 @@ export const ModalBody = ({
 
 export const ModalFooter = ({
   children,
-  className,
+  classNames,
 }: ModalFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={classify(css.modalFooter, className)}>
-        <div className={css.modalFooterActions}>{children}</div>
+      <div className={classify(css.modalFooter, classNames?.wrapper)}>
+        <div className={classify(css.modalFooterActions, classNames?.actions)}>
+          {children}
+        </div>
       </div>
     )}
   </>

package/lib/components/Panel/Panel.js

@@ -48,12 +48,12 @@ exports.PanelBody = PanelBody;
 const PanelFooter = _ref3 => {
   let {
     children,
-    className
+    classNames
   } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_PanelModule.default.panelFooter, className)
+    className: (0, _classify.default)(_PanelModule.default.panelFooter, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement("div", {
-    className: _PanelModule.default.panelFooterActions
+    className: (0, _classify.default)(_PanelModule.default.panelFooterActions, classNames?.actions)
   }, children)));
 };
 exports.PanelFooter = PanelFooter;
@@ -65,6 +65,7 @@ const Panel = _ref4 => {
     anchor = 'left',
     onClose,
     hideBackdrop = true,
+    classNames,
     ...restPanelProps
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
@@ -77,12 +78,13 @@ const Panel = _ref4 => {
       container: (0, _classify.default)(_PanelModule.default.panelContainer, {
         [_PanelModule.default.in]: isTransitioning,
         [_PanelModule.default.open]: isOpen
-      }),
+      }, classNames?.container),
       content: (0, _classify.default)(_PanelModule.default.panel, _PanelModule.default[anchor], {
         [_PanelModule.default.medium]: size === 'medium',
         [_PanelModule.default.small]: size === 'small',
         [_PanelModule.default.large]: size === 'large'
-      })
+      }, classNames?.content),
+      backdrop: (0, _classify.default)(classNames?.backdrop)
     }
   }), children);
 };

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

@@ -23,9 +23,14 @@ export type PanelHeaderProps = {
   className?: string,
 };
 
+type FooterClassNames = $ReadOnly<{
+  wrapper?: string,
+  actions?: string,
+}>;
+
 export type PanelFooterProps = {
   children?: React.Node,
-  className?: string,
+  classNames?: FooterClassNames,
 };
 
 export type PanelBodyProps = {
@@ -73,12 +78,14 @@ export const PanelBody = ({
 
 export const PanelFooter = ({
   children,
-  className,
+  classNames,
 }: PanelFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={classify(css.panelFooter, className)}>
-        <div className={css.panelFooterActions}>{children}</div>
+      <div className={classify(css.panelFooter, classNames?.wrapper)}>
+        <div className={classify(css.panelFooterActions, classNames?.actions)}>
+          {children}
+        </div>
       </div>
     )}
   </>
@@ -91,6 +98,7 @@ export const Panel = ({
   anchor = 'left',
   onClose,
   hideBackdrop = true,
+  classNames,
   ...restPanelProps
 }: PanelProps): React.Node => {
   const isTransitioning = useMountTransition(
@@ -105,15 +113,25 @@ export const Panel = ({
       hideBackdrop={hideBackdrop}
       {...restPanelProps}
       classNames={{
-        container: classify(css.panelContainer, {
-          [css.in]: isTransitioning,
-          [css.open]: isOpen,
-        }),
-        content: classify(css.panel, css[anchor], {
-          [css.medium]: size === 'medium',
-          [css.small]: size === 'small',
-          [css.large]: size === 'large',
-        }),
+        container: classify(
+          css.panelContainer,
+          {
+            [css.in]: isTransitioning,
+            [css.open]: isOpen,
+          },
+          classNames?.container,
+        ),
+        content: classify(
+          css.panel,
+          css[anchor],
+          {
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.large]: size === 'large',
+          },
+          classNames?.content,
+        ),
+        backdrop: classify(classNames?.backdrop),
       }}
     >
       {children}

package/lib/components/SubMenu/SubMenu.js

@@ -51,7 +51,7 @@ const SubMenuItemAction = _ref3 => {
 };
 exports.SubMenuItemAction = SubMenuItemAction;
 SubMenuItemAction.displayName = 'SubMenuItemAction';
-const SubMenuItem = _ref4 => {
+const SubMenuItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     selectedMenuKey,
@@ -88,11 +88,12 @@ const SubMenuItem = _ref4 => {
       [_SubMenuModule.default.selected]: selected,
       [_SubMenuModule.default.disabled]: disabled
     }, classNames?.wrapper),
-    onClick: onChangeHandler
+    onClick: onChangeHandler,
+    ref: ref
   }), /*#__PURE__*/React.createElement("div", {
     className: _SubMenuModule.default.menuIconName
   }, getNamedComp('SubMenuItemIcon'), getNamedComp('SubMenuItemText')), getNamedComp('SubMenuItemAction'));
-};
+});
 exports.SubMenuItem = SubMenuItem;
 const SubMenuGroup = _ref5 => {
   let {

package/lib/components/SubMenu/SubMenu.js.flow

@@ -75,63 +75,72 @@ export type SubMenuItemProps = {
   ...
 };
 
-export const SubMenuItem = ({
-  children,
-  selectedMenuKey,
-  disabled,
-  classNames,
-  onChange,
-  menuKey,
-  ...props
-}: SubMenuItemProps): React.Node => {
-  const onChangeHandler = () => {
-    if (!disabled) {
-      onChange && onChange(menuKey);
-    }
-  };
-
-  const selected = selectedMenuKey === menuKey;
-
-  const getNamedComp = (comp: string) => {
-    const childrenArray = React.Children.toArray(children);
-    if (childrenArray.length) {
-      const nodes: React.Node[] = [];
-      for (const child of childrenArray) {
-        if (child?.type?.displayName === comp) {
-          nodes.push(
-            React.cloneElement(child, {
-              selected,
-              disabled,
-            }),
-          );
+export const SubMenuItem: React$AbstractComponent<
+  SubMenuItemProps,
+  HTMLElement,
+> = React.forwardRef(
+  (
+    {
+      children,
+      selectedMenuKey,
+      disabled,
+      classNames,
+      onChange,
+      menuKey,
+      ...props
+    }: SubMenuItemProps,
+    ref,
+  ): React.Node => {
+    const onChangeHandler = () => {
+      if (!disabled) {
+        onChange && onChange(menuKey);
+      }
+    };
+
+    const selected = selectedMenuKey === menuKey;
+
+    const getNamedComp = (comp: string) => {
+      const childrenArray = React.Children.toArray(children);
+      if (childrenArray.length) {
+        const nodes: React.Node[] = [];
+        for (const child of childrenArray) {
+          if (child?.type?.displayName === comp) {
+            nodes.push(
+              React.cloneElement(child, {
+                selected,
+                disabled,
+              }),
+            );
+          }
         }
+        return nodes.length > 1 ? nodes : nodes[0];
       }
-      return nodes.length > 1 ? nodes : nodes[0];
-    }
-    return null;
-  };
+      return null;
+    };
 
-  return (
-    <div
-      {...props}
-      className={classify(
-        css.menuItem,
-        {
-          [css.selected]: selected,
-          [css.disabled]: disabled,
-        },
-        classNames?.wrapper,
-      )}
-      onClick={onChangeHandler}
-    >
-      <div className={css.menuIconName}>
-        {getNamedComp('SubMenuItemIcon')}
-        {getNamedComp('SubMenuItemText')}
+    return (
+      <div
+        {...props}
+        className={classify(
+          css.menuItem,
+          {
+            [css.selected]: selected,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+        onClick={onChangeHandler}
+        ref={ref}
+      >
+        <div className={css.menuIconName}>
+          {getNamedComp('SubMenuItemIcon')}
+          {getNamedComp('SubMenuItemText')}
+        </div>
+        {getNamedComp('SubMenuItemAction')}
       </div>
-      {getNamedComp('SubMenuItemAction')}
-    </div>
-  );
-};
+    );
+  },
+);
 
 type SubMenuGroupClassNames = $ReadOnly<{
   wrapper?: string,

package/lib/components/Text/Text.js

@@ -21,8 +21,15 @@ const HighlightText = _ref => {
     highlightWithBackground
   } = _ref;
   // Split text on highlight term, include term itself into parts, ignore case
-  const parts = text.split(new RegExp(`(${highlight})`, caseSensitiveHighlighting ? '' : 'gi'));
-  return /*#__PURE__*/React.createElement("span", null, parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? /*#__PURE__*/React.createElement("span", {
+  let highlights = '';
+  if (Array.isArray(highlight)) {
+    highlights = highlight.join('|');
+  } else {
+    highlights = highlight;
+  }
+  const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'));
+  return /*#__PURE__*/React.createElement("span", null, parts.map(part => highlights.toLowerCase().includes(part.toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
+    key: part,
     className: (0, _classify.default)(_typographyModule.default.highlightText, {
       [_typographyModule.default.bgHighlighting]: highlightWithBackground
     }, highlightClassName)

package/lib/components/Text/Text.js.flow

@@ -14,7 +14,7 @@ export type TextProps = {
   children?: React.Node,
   className?: string,
   highlightedTextClassName?: string,
-  highlightString?: string,
+  highlightString?: string | string[],
   caseSensitiveHighlighting?: boolean,
   highlightWithBackground?: boolean,
   ...
@@ -22,7 +22,7 @@ export type TextProps = {
 
 export type HighlightTextProps = {
   text: string,
-  highlight: string,
+  highlight: string | string[],
   highlightClassName?: string,
   caseSensitiveHighlighting?: boolean,
   highlightWithBackground?: boolean,
@@ -36,14 +36,21 @@ const HighlightText = ({
   highlightWithBackground,
 }: HighlightTextProps) => {
   // Split text on highlight term, include term itself into parts, ignore case
+  let highlights = '';
+  if (Array.isArray(highlight)) {
+    highlights = highlight.join('|');
+  } else {
+    highlights = highlight;
+  }
   const parts = text.split(
-    new RegExp(`(${highlight})`, caseSensitiveHighlighting ? '' : 'gi'),
+    new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'),
   );
   return (
     <span>
       {parts.map((part) =>
-        part.toLowerCase() === highlight.toLowerCase() ? (
+        highlights.toLowerCase().includes(part.toLowerCase()) ? (
           <span
+            key={part}
             className={classify(
               css.highlightText,
               {

package/package.json

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