@spaced-out/ui-design-system 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.1.5](https://github.com/spaced-out/ui-design-system/compare/v0.1.4...v0.1.5) (2023-04-04)
+
+
+### Features
+
+* in context aleart and banner focus states ([9d3144d](https://github.com/spaced-out/ui-design-system/commit/9d3144dad0cc32f21cfd1ed4284b6eb5da99e742))
+
+
+### Bug Fixes
+
+* typeahead and dropdown fixes ([fa9d5ed](https://github.com/spaced-out/ui-design-system/commit/fa9d5ed1276fb3381fa71ac2f57c203ca9900dd8))
+
+### [0.1.4](https://github.com/spaced-out/ui-design-system/compare/v0.1.3...v0.1.4) (2023-04-03)
+
+
+### Bug Fixes
+
+* avatar-tooltip, panel header, table ([#93](https://github.com/spaced-out/ui-design-system/issues/93)) ([907f0c3](https://github.com/spaced-out/ui-design-system/commit/907f0c3067e7ed4fd347dacfc1d3042601f4b9f3))
+* link disabled state fix ([0324fbb](https://github.com/spaced-out/ui-design-system/commit/0324fbb1e5254d7160e639cf34c756d60505f7af))
+
 ### [0.1.3](https://github.com/spaced-out/ui-design-system/compare/v0.1.2...v0.1.3) (2023-04-03)
 
 

package/lib/components/Avatar/Avatar.js

@@ -105,7 +105,7 @@ const AvatarConditionalContent = _ref2 => {
     className: classNames?.text
   }) : null);
 };
-const Avatar = _ref3 => {
+const Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     classNames,
     size = AVATAR_SIZE.medium,
@@ -125,7 +125,8 @@ const Avatar = _ref3 => {
       [_AvatarModule.default.mediumSize]: size === 'medium',
       [_AvatarModule.default.smallSize]: size === 'small'
     }, classNames?.wrapper),
-    style: style
+    style: style,
+    ref: ref
   }, ring ? /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarModule.default.ring, classNames?.ring)
   }, /*#__PURE__*/React.createElement("div", {
@@ -151,7 +152,7 @@ const Avatar = _ref3 => {
     statusBorderColorToken: statusBorderColorToken,
     classNames: classNames
   }));
-};
+});
 exports.Avatar = Avatar;
 const BaseAvatar = _ref4 => {
   let {

package/lib/components/Avatar/Avatar.js.flow

@@ -167,34 +167,54 @@ const AvatarConditionalContent = ({
   </div>
 );
 
-export const Avatar = ({
-  classNames,
-  size = AVATAR_SIZE.medium,
-  imageSrc,
-  text,
-  style,
-  iconName,
-  iconType,
-  color,
-  ring = false,
-  status,
-  statusBorderColorToken,
-}: AvatarProps): React.Node => (
-  <div
-    className={classify(
-      css.container,
+export const Avatar: React$AbstractComponent<AvatarProps, HTMLDivElement> =
+  React.forwardRef<AvatarProps, HTMLDivElement>(
+    (
       {
-        [css.largeSize]: size === 'large',
-        [css.mediumSize]: size === 'medium',
-        [css.smallSize]: size === 'small',
-      },
-      classNames?.wrapper,
-    )}
-    style={style}
-  >
-    {ring ? (
-      <div className={classify(css.ring, classNames?.ring)}>
-        <div className={css.whiteCircle}>
+        classNames,
+        size = AVATAR_SIZE.medium,
+        imageSrc,
+        text,
+        style,
+        iconName,
+        iconType,
+        color,
+        ring = false,
+        status,
+        statusBorderColorToken,
+      }: AvatarProps,
+      ref,
+    ) => (
+      <div
+        className={classify(
+          css.container,
+          {
+            [css.largeSize]: size === 'large',
+            [css.mediumSize]: size === 'medium',
+            [css.smallSize]: size === 'small',
+          },
+          classNames?.wrapper,
+        )}
+        style={style}
+        ref={ref}
+      >
+        {ring ? (
+          <div className={classify(css.ring, classNames?.ring)}>
+            <div className={css.whiteCircle}>
+              <AvatarConditionalContent
+                imageSrc={imageSrc}
+                text={text}
+                iconName={iconName}
+                iconType={iconType}
+                color={color}
+                size={size}
+                status={status}
+                statusBorderColorToken={statusBorderColorToken}
+                classNames={classNames}
+              />
+            </div>
+          </div>
+        ) : (
           <AvatarConditionalContent
             imageSrc={imageSrc}
             text={text}
@@ -206,23 +226,10 @@ export const Avatar = ({
             statusBorderColorToken={statusBorderColorToken}
             classNames={classNames}
           />
-        </div>
+        )}
       </div>
-    ) : (
-      <AvatarConditionalContent
-        imageSrc={imageSrc}
-        text={text}
-        iconName={iconName}
-        iconType={iconType}
-        color={color}
-        size={size}
-        status={status}
-        statusBorderColorToken={statusBorderColorToken}
-        classNames={classNames}
-      />
-    )}
-  </div>
-);
+    ),
+  );
 
 export const BaseAvatar = ({
   classNames,

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -23,7 +23,8 @@ const AvatarGroup = _ref => {
     borderColor = _color.colorBackgroundTertiary,
     maxTooltipLines = 7,
     placement = 'top',
-    maxAvatars = 5
+    maxAvatars = 5,
+    tooltipElevation
   } = _ref;
   const childAvatarCount = React.Children.count(children);
   const leftOverlap = {
@@ -62,7 +63,8 @@ const AvatarGroup = _ref => {
     return /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
       body: /*#__PURE__*/React.createElement(NameListNode, null),
       bodyMaxLines: maxTooltipLines,
-      placement: placement
+      placement: placement,
+      elevation: tooltipElevation
     }, /*#__PURE__*/React.createElement("div", {
       className: _AvatarGroupModule.default.plusAvatar
     }, /*#__PURE__*/React.createElement(_Avatar.BaseAvatar, {

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -26,6 +26,7 @@ export type AvatarGroupProps = {
   maxTooltipLines?: number,
   placement?: PlacementType,
   maxAvatars?: number,
+  tooltipElevation?: string,
 };
 
 export const AvatarGroup = ({
@@ -35,6 +36,7 @@ export const AvatarGroup = ({
   maxTooltipLines = 7,
   placement = 'top',
   maxAvatars = 5,
+  tooltipElevation,
 }: AvatarGroupProps): React.Node => {
   const childAvatarCount = React.Children.count(children);
 
@@ -85,6 +87,7 @@ export const AvatarGroup = ({
         body={<NameListNode />}
         bodyMaxLines={maxTooltipLines}
         placement={placement}
+        elevation={tooltipElevation}
       >
         <div className={css.plusAvatar}>
           <BaseAvatar

package/lib/components/Dropdown/Dropdown.js

@@ -27,10 +27,9 @@ const Dropdown = _ref => {
     menu,
     onMenuOpen,
     onMenuClose,
-    dropdownInputText,
+    dropdownInputText = '',
     ...inputProps
   } = _ref;
-  const [inputValue, setInputValue] = React.useState(dropdownInputText || '');
   const dropdownRef = React.useRef();
   const {
     x,
@@ -44,9 +43,6 @@ const Dropdown = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  React.useEffect(() => {
-    setInputValue(dropdownInputText || '');
-  }, [dropdownInputText]);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -67,7 +63,7 @@ const Dropdown = _ref => {
       boxRef: reference,
       size: size,
       placeholder: placeholder,
-      value: inputValue,
+      value: dropdownInputText,
       classNames: {
         box: _DropdownModule.default.inputBox
       }

package/lib/components/Dropdown/Dropdown.js.flow

@@ -45,10 +45,9 @@ export const Dropdown = ({
   menu,
   onMenuOpen,
   onMenuClose,
-  dropdownInputText,
+  dropdownInputText = '',
   ...inputProps
 }: DropdownProps): React.Node => {
-  const [inputValue, setInputValue] = React.useState(dropdownInputText || '');
   const dropdownRef = React.useRef();
   const {x, y, reference, floating, strategy} = useFloating({
     strategy: 'absolute',
@@ -57,10 +56,6 @@ export const Dropdown = ({
     middleware: [flip(), offset(parseInt(spaceXXSmall))],
   });
 
-  React.useEffect(() => {
-    setInputValue(dropdownInputText || '');
-  }, [dropdownInputText]);
-
   const onMenuToggle = (isOpen: boolean) => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -77,7 +72,7 @@ export const Dropdown = ({
             boxRef={reference}
             size={size}
             placeholder={placeholder}
-            value={inputValue}
+            value={dropdownInputText}
             classNames={{box: css.inputBox}}
             {...inputProps}
             iconRightName={isOpen ? 'angle-up' : 'angle-down'}

package/lib/components/InContextAlert/InContextAlert.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
+var _Link = require("../Link");
 var _Text = require("../Text");
 var _Truncate = require("../Truncate");
 var _InContextAlertModule = _interopRequireDefault(require("./InContextAlert.module.css"));
@@ -110,10 +111,10 @@ const InContextAlert = props => {
     line: 2
   }, children)), !!(actionText || dismissable) && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InContextAlertModule.default.actionContainer, classNames?.actionContainer)
-  }, !!actionText && /*#__PURE__*/React.createElement(_Text.ButtonTextExtraSmall, {
-    className: _InContextAlertModule.default.actionText,
-    onClick: onAction
-  }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, !!actionText && /*#__PURE__*/React.createElement(_Link.Link, {
+    onClick: onAction,
+    color: "primary"
+  }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
     color: _typography.TEXT_COLORS.primary,
     name: "close",
     size: "small",

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -5,8 +5,9 @@ import * as React from 'react';
 import {TEXT_COLORS} from '../../types/typography';
 import {classify} from '../../utils/classify';
 import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {ButtonTextExtraSmall, SubTitleExtraSmall} from '../Text';
+import {ClickableIcon, Icon} from '../Icon';
+import {Link} from '../Link';
+import {SubTitleExtraSmall} from '../Text';
 import {Truncate} from '../Truncate';
 
 import css from './InContextAlert.module.css';
@@ -172,15 +173,12 @@ export const InContextAlert = (props: InContextAlertProps): React.Node => {
               )}
             >
               {!!actionText && (
-                <ButtonTextExtraSmall
-                  className={css.actionText}
-                  onClick={onAction}
-                >
+                <Link onClick={onAction} color="primary">
                   {actionText}
-                </ButtonTextExtraSmall>
+                </Link>
               )}
               {!!dismissable && (
-                <Icon
+                <ClickableIcon
                   color={TEXT_COLORS.primary}
                   name="close"
                   size="small"

package/lib/components/InContextAlert/InContextAlert.module.css

@@ -65,7 +65,6 @@
 }
 
 .closeIcon {
-  cursor: pointer;
   margin-left: auto;
 }
 
@@ -75,9 +74,3 @@
   align-items: center;
   gap: spaceSmall;
 }
-
-.actionText {
-  cursor: pointer;
-  text-decoration: underline;
-  white-space: nowrap;
-}

package/lib/components/Link/Link.js

@@ -66,7 +66,7 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("a", _extends({}, props, {
-    tabIndex: tabIndex,
+    tabIndex: disabled ? -1 : tabIndex,
     innerref: ref,
     "data-testid": "Link",
     className: (0, _classify.default)(_typographyModule.default.link, _typographyModule.default[as], _typographyModule.default[color], {

package/lib/components/Link/Link.js.flow

@@ -66,7 +66,7 @@ export type LinkProps = {
   underline?: boolean,
   target?: AnchorTarget,
   href?: string,
-  onClick?: (SyntheticEvent<HTMLElement>) => mixed,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   tabIndex?: number,
   disabled?: boolean,
   ...
@@ -91,7 +91,7 @@ export const Link: React$AbstractComponent<
   ) => (
     <a
       {...props}
-      tabIndex={tabIndex}
+      tabIndex={disabled ? -1 : tabIndex}
       innerref={ref}
       data-testid="Link"
       className={classify(

package/lib/components/Panel/Panel.js

@@ -21,7 +21,8 @@ const PanelHeader = _ref => {
     children,
     hideCloseBtn,
     onCloseButtonClick,
-    className
+    className,
+    size
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PanelModule.default.panelHeader, className)
@@ -31,7 +32,8 @@ const PanelHeader = _ref => {
     iconLeftName: "xmark",
     type: "ghost",
     onClick: onCloseButtonClick,
-    ariaLabel: "Close Button"
+    ariaLabel: "Close Button",
+    size: size
   })));
 };
 exports.PanelHeader = PanelHeader;

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

@@ -21,6 +21,7 @@ export type PanelHeaderProps = {
   hideCloseBtn?: boolean,
   onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
+  size?: 'medium' | 'small',
 };
 
 type FooterClassNames = $ReadOnly<{
@@ -49,6 +50,7 @@ export const PanelHeader = ({
   hideCloseBtn,
   onCloseButtonClick,
   className,
+  size,
 }: PanelHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
@@ -62,6 +64,7 @@ export const PanelHeader = ({
             type="ghost"
             onClick={onCloseButtonClick}
             ariaLabel="Close Button"
+            size={size}
           ></Button>
         )}
       </div>

package/lib/components/SubMenu/SubMenu.module.css

@@ -65,7 +65,7 @@
 .subMenuGroupWrapper {
   display: flex;
   flex-direction: column;
-  padding: spaceSmall spaceNone;
+  padding: spaceXSmall spaceNone;
   flex: auto;
 }
 

package/lib/components/Table/StaticTable.js

@@ -8,6 +8,7 @@ exports.StaticTable = StaticTable;
 var React = _interopRequireWildcard(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _xor = _interopRequireDefault(require("lodash/xor"));
+var _classify = require("../../utils/classify");
 var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
 var _Row = require("./Row");
 var _TableHeader = require("./TableHeader");
@@ -28,6 +29,7 @@ const BasicTableBody = (0, _makeClassNameComponent.makeClassNameComponent)(_Tabl
 exports.BasicTableBody = BasicTableBody;
 function StaticTable(props) {
   const {
+    classNames,
     className,
     Row,
     entries,
@@ -49,7 +51,8 @@ function StaticTable(props) {
     idName = 'id',
     emptyText,
     disabled,
-    customLoader
+    customLoader,
+    borderRadius
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -73,14 +76,16 @@ function StaticTable(props) {
     }
   } : undefined;
   return /*#__PURE__*/React.createElement("div", {
-    className: _TableModule.default.tableContainer,
-    "data-id": "table-wrap"
+    className: (0, _classify.classify)(_TableModule.default.tableContainer, classNames?.wrapper),
+    "data-id": "table-wrap",
+    style: {
+      '--border-radius': borderRadius
+    }
   }, /*#__PURE__*/React.createElement(BasicTable, {
     "data-id": "basic-table",
-    className: className
+    className: (0, _classify.classify)(className, classNames?.table)
   }, showHeader && /*#__PURE__*/React.createElement(_TableHeader.DefaultTableHeader, {
-    tableHeaderClassName: tableHeaderClassName,
-    className: tableHeaderClassName,
+    className: (0, _classify.classify)(tableHeaderClassName, classNames?.tableHeader),
     sortable: sortable,
     columns: headers,
     handleSortClick: handleSortClick,
@@ -89,7 +94,9 @@ function StaticTable(props) {
     disabled: disabled,
     handleCheckboxClick: handleHeaderCheckboxClick,
     checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entries.length ? 'mixed' : 'true'
-  }), /*#__PURE__*/React.createElement(BasicTableBody, null, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_Row.EmptyRow, {
+  }), /*#__PURE__*/React.createElement(BasicTableBody, {
+    className: classNames?.tableBody
+  }, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_Row.EmptyRow, {
     isLoading: isLoading,
     emptyText: emptyText,
     headersLength: handleHeaderCheckboxClick ? headers.length + 1 : headers.length,

package/lib/components/Table/StaticTable.js.flow

@@ -4,6 +4,7 @@ import * as React from 'react';
 import get from 'lodash/get';
 import xor from 'lodash/xor';
 
+import {classify} from '../../utils/classify';
 import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
 import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
 
@@ -37,18 +38,15 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
   rowKeys?: string[],
 }): React.Node {
   const {
+    classNames,
     className,
-
     Row,
-
     entries,
     extras,
     rowKeys,
-
     headers,
     showHeader = true,
     tableHeaderClassName,
-
     sortable,
     defaultSortKey,
     defaultSortDirection = 'original',
@@ -58,12 +56,12 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     sortDirection,
     selectedKeys,
     onSelect,
-
     isLoading,
     idName = 'id',
     emptyText,
     disabled,
     customLoader,
+    borderRadius,
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -92,12 +90,20 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     : undefined;
 
   return (
-    <div className={css.tableContainer} data-id="table-wrap">
-      <BasicTable data-id="basic-table" className={className}>
+    <div
+      className={classify(css.tableContainer, classNames?.wrapper)}
+      data-id="table-wrap"
+      style={{
+        '--border-radius': borderRadius,
+      }}
+    >
+      <BasicTable
+        data-id="basic-table"
+        className={classify(className, classNames?.table)}
+      >
         {showHeader && (
           <DefaultTableHeader
-            tableHeaderClassName={tableHeaderClassName}
-            className={tableHeaderClassName}
+            className={classify(tableHeaderClassName, classNames?.tableHeader)}
             sortable={sortable}
             columns={headers}
             handleSortClick={handleSortClick}
@@ -115,7 +121,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
           />
         )}
 
-        <BasicTableBody>
+        <BasicTableBody className={classNames?.tableBody}>
           {isLoading || !entries.length ? (
             <EmptyRow
               isLoading={isLoading}

package/lib/components/Table/Table.js

@@ -26,6 +26,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function Table(props) {
   const {
     className,
+    classNames,
     Row,
     entries,
     extras,

package/lib/components/Table/Table.js.flow

@@ -19,7 +19,15 @@ export type GenericObject = {
   +[key: string]: mixed,
 };
 
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  table?: string,
+  tableHeader?: string,
+  tableBody?: string,
+}>;
+
 export type TableProps<T, U> = {
+  classNames?: ClassNames,
   className?: string,
   Row?: TableRow<T, U>,
   headers: GenericHeaderItems<T, U>,
@@ -41,6 +49,7 @@ export type TableProps<T, U> = {
   emptyText?: React.Node,
   disabled?: boolean,
   customLoader?: React.Node,
+  borderRadius?: string,
 };
 
 /**
@@ -61,6 +70,7 @@ export function Table<Data: GenericObject, Extras: GenericObject>(
 ): React.Node {
   const {
     className,
+    classNames,
     Row,
     entries,
     extras,

package/lib/components/Table/Table.module.css

@@ -21,10 +21,11 @@
 }
 
 .tableContainer {
+  --border-radius: borderRadiusMedium;
   composes: borderPrimary from '../../styles/border.module.css';
   width: sizeFluid;
   overflow-x: scroll;
-  border-radius: borderRadiusMedium;
+  border-radius: var(--border-radius);
 }
 
 .defaultTable {
@@ -33,7 +34,7 @@
   overflow-x: scroll;
   border-collapse: collapse;
   box-sizing: border-box;
-  border-radius: borderRadiusMedium;
+  border-radius: var(--border-radius);
   box-shadow: borderWidthNone borderWidthNone borderWidthNone borderWidthPrimary
     colorBorderPrimary;
   table-layout: fixed;
@@ -41,8 +42,8 @@
 }
 .defaultTableBody {
   flex-flow: column;
-  border-radius: borderRadiusNone borderRadiusNone borderRadiusMedium
-    borderRadiusMedium;
+  border-radius: borderRadiusNone borderRadiusNone var(--border-radius)
+    var(--border-radius);
   background: colorBackgroundTertiary;
 }
 
@@ -142,11 +143,11 @@
 }
 
 .defaultTable .defaultRow:last-child td:first-child {
-  border-bottom-left-radius: borderRadiusMedium;
+  border-bottom-left-radius: var(--border-radius);
 }
 
 .defaultTable .defaultRow:last-child td:last-child {
-  border-bottom-right-radius: borderRadiusMedium;
+  border-bottom-right-radius: var(--border-radius);
 }
 
 .defaultTable .defaultRow:last-child {
@@ -188,7 +189,7 @@ th:first-child {
 
 .defaultTableHead {
   flex-flow: column;
-  border-radius: borderRadiusMedium borderRadiusMedium borderRadiusNone
+  border-radius: var(--border-radius) var(--border-radius) borderRadiusNone
     borderRadiusNone;
   composes: borderBottomPrimary from '../../styles/border.module.css';
   padding: spaceSmall;
@@ -197,7 +198,7 @@ th:first-child {
 .defaultHeaderRow {
   box-sizing: border-box;
   background: colorBackgroundPrimary;
-  border-radius: borderRadiusMedium borderRadiusMedium borderRadiusNone
+  border-radius: var(--border-radius) var(--border-radius) borderRadiusNone
     borderRadiusNone;
 }
 
@@ -227,11 +228,11 @@ th:first-child {
 }
 
 .defaultHeaderCell:first-child {
-  border-top-left-radius: borderRadiusMedium;
+  border-top-left-radius: var(--border-radius);
 }
 
 .defaultHeaderCell:last-child {
-  border-top-right-radius: borderRadiusMedium;
+  border-top-right-radius: var(--border-radius);
 }
 
 .defaultHeaderCell:not(.selectedHeader):hover {

package/lib/components/Table/TableHeader.js

@@ -55,7 +55,6 @@ const SortIcon = _ref => {
 };
 function DefaultTableHeader(props) {
   const {
-    tableHeaderClassName,
     className,
     sortable = false,
     columns,
@@ -129,7 +128,7 @@ function DefaultTableHeader(props) {
     }, filterIcon))));
   }));
   return /*#__PURE__*/React.createElement(BasicTableHead, {
-    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, tableHeaderClassName, className)
+    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, className)
   }, /*#__PURE__*/React.createElement(_Row.BasicRow, {
     className: _TableModule.default.defaultHeaderRow
   }, handleCheckboxClick && /*#__PURE__*/React.createElement(BasicHeadCell, {

package/lib/components/Table/TableHeader.js.flow

@@ -104,7 +104,6 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
   props: TableHeaderProps<T, U>,
 ): React.Node {
   const {
-    tableHeaderClassName,
     className,
     sortable = false,
     columns,
@@ -208,13 +207,7 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
   );
 
   return (
-    <BasicTableHead
-      className={classify(
-        css.tableHeaderSortable,
-        tableHeaderClassName,
-        className,
-      )}
-    >
+    <BasicTableHead className={classify(css.tableHeaderSortable, className)}>
       <BasicRow className={css.defaultHeaderRow}>
         {handleCheckboxClick && (
           <BasicHeadCell scope="col">

package/lib/components/Typeahead/Typeahead.js

@@ -29,11 +29,10 @@ const Typeahead = _ref => {
     menu,
     onMenuOpen,
     onMenuClose,
-    typeaheadInputText,
+    typeaheadInputText = '',
     ...inputProps
   } = _ref;
   const typeaheadRef = React.useRef();
-  const [inputValue, setInputValue] = React.useState(typeaheadInputText || '');
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
   const {
     x,
@@ -47,28 +46,19 @@ const Typeahead = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  const handleSelect = option => {
-    if (option?.key) {
-      onSelect && onSelect(option);
-      setInputValue(option.label);
-    }
-  };
-  React.useEffect(() => {
-    setInputValue(typeaheadInputText || '');
-  }, [typeaheadInputText]);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
   React.useEffect(() => {
     const optionsFiltered = menu?.options && menu.options.filter(option => {
-      if (!option.label || !inputValue) {
+      if (!option.label || !typeaheadInputText) {
         return true;
       } else {
-        return option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1;
+        return option.label.toLowerCase().indexOf(typeaheadInputText.toLowerCase()) !== -1;
       }
     });
     setFilteredOptions(optionsFiltered || []);
-  }, [inputValue]);
+  }, [typeaheadInputText]);
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle
   }, _ref2 => {
@@ -86,14 +76,13 @@ const Typeahead = _ref => {
       boxRef: reference,
       size: size,
       placeholder: placeholder,
-      value: inputValue,
+      value: typeaheadInputText,
       classNames: {
         box: classNames?.box
       }
     }, inputProps, {
       onChange: e => {
         e.stopPropagation();
-        setInputValue(e.target.value);
         onSearch && onSearch(e);
         if (e.target.value.length > 0) {
           onOpen();
@@ -102,7 +91,6 @@ const Typeahead = _ref => {
         }
       },
       onClear: _e => {
-        setInputValue('');
         onClear?.();
       }
     })), isOpen && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
@@ -118,7 +106,7 @@ const Typeahead = _ref => {
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: filteredOptions,
       onSelect: option => {
-        handleSelect(option);
+        onSelect && onSelect(option);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

package/lib/components/Typeahead/Typeahead.js.flow

@@ -49,12 +49,10 @@ export const Typeahead = ({
   menu,
   onMenuOpen,
   onMenuClose,
-  typeaheadInputText,
+  typeaheadInputText = '',
   ...inputProps
 }: TypeaheadProps): React.Node => {
   const typeaheadRef = React.useRef();
-
-  const [inputValue, setInputValue] = React.useState(typeaheadInputText || '');
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
 
   const {x, y, reference, floating, strategy} = useFloating({
@@ -64,17 +62,6 @@ export const Typeahead = ({
     middleware: [flip(), offset(parseInt(spaceXXSmall))],
   });
 
-  const handleSelect = (option?: MenuOption) => {
-    if (option?.key) {
-      onSelect && onSelect(option);
-      setInputValue(option.label);
-    }
-  };
-
-  React.useEffect(() => {
-    setInputValue(typeaheadInputText || '');
-  }, [typeaheadInputText]);
-
   const onMenuToggle = (isOpen: boolean) => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -83,16 +70,18 @@ export const Typeahead = ({
     const optionsFiltered =
       menu?.options &&
       menu.options.filter((option) => {
-        if (!option.label || !inputValue) {
+        if (!option.label || !typeaheadInputText) {
           return true;
         } else {
           return (
-            option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
+            option.label
+              .toLowerCase()
+              .indexOf(typeaheadInputText.toLowerCase()) !== -1
           );
         }
       });
     setFilteredOptions(optionsFiltered || []);
-  }, [inputValue]);
+  }, [typeaheadInputText]);
 
   return (
     <ClickAway onChange={onMenuToggle}>
@@ -106,12 +95,11 @@ export const Typeahead = ({
             boxRef={reference}
             size={size}
             placeholder={placeholder}
-            value={inputValue}
+            value={typeaheadInputText}
             classNames={{box: classNames?.box}}
             {...inputProps}
             onChange={(e) => {
               e.stopPropagation();
-              setInputValue(e.target.value);
               onSearch && onSearch(e);
               if (e.target.value.length > 0) {
                 onOpen();
@@ -120,7 +108,6 @@ export const Typeahead = ({
               }
             }}
             onClear={(_e) => {
-              setInputValue('');
               onClear?.();
             }}
           />
@@ -141,7 +128,7 @@ export const Typeahead = ({
                 {...menu}
                 options={filteredOptions}
                 onSelect={(option) => {
-                  handleSelect(option);
+                  onSelect && onSelect(option);
                   if (
                     !menu.optionsVariant ||
                     menu.optionsVariant === 'normal'

package/package.json

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