@spaced-out/ui-design-system 0.1.116 → 0.1.118

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.118](https://github.com/spaced-out/ui-design-system/compare/v0.1.117...v0.1.118) (2024-08-05)
+
+
+### Features
+
+* 🍪 chip enhancements ([#250](https://github.com/spaced-out/ui-design-system/issues/250)) ([a18fae8](https://github.com/spaced-out/ui-design-system/commit/a18fae893703092d6221f09043e62cc86308ae67))
+
+### [0.1.117](https://github.com/spaced-out/ui-design-system/compare/v0.1.116...v0.1.117) (2024-07-30)
+
+
+### Features
+
+* wrapAfter prop in button tabs ([#248](https://github.com/spaced-out/ui-design-system/issues/248)) ([af99d41](https://github.com/spaced-out/ui-design-system/commit/af99d41270ae97e92d3a0e0e0bf07c1a02af0b33))
+
 ### [0.1.116](https://github.com/spaced-out/ui-design-system/compare/v0.1.115...v0.1.116) (2024-07-25)
 
 

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow

@@ -15,7 +15,7 @@ export type ButtonTabProps = {
   classNames?: ClassNames,
   children?: React.Node,
   disabled?: boolean,
-  onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
+  onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
   iconName?: string,
   iconType?: IconType,
   size?: 'medium' | 'small',

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.module.css

@@ -66,8 +66,9 @@
 .buttonTabWrapper.isSelected {
   background-color: colorFillSecondary;
   color: colorTextPrimary;
-  border-width: borderWidthPrimary borderWidthPrimary borderWidthPrimary
-    borderWidthNone;
+  border-top-width: borderWidthPrimary;
+  border-right-width: borderWidthPrimary;
+  border-bottom-width: borderWidthPrimary;
   border-style: solid;
   border-color: colorBorderPrimary;
 }

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonTabDropdown = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@floating-ui/react");
+var _lodash = require("lodash");
+var _space = require("../../styles/variables/_space");
+var _clickAway = require("../../utils/click-away");
+var _Menu = require("../Menu");
+var _ButtonTab = require("./ButtonTab");
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const ButtonTabDropdown = _ref => {
+  let {
+    title,
+    anchorPosition = 'bottom-end',
+    ...buttonTabProps
+  } = _ref;
+  const menuBtnRef = React.useRef();
+  const {
+    size,
+    children,
+    selectedButtonTabId,
+    onButtonTabSelect: onTabSelect
+  } = buttonTabProps;
+  const childrenArray = React.Children.toArray(children);
+  const menuOptions = childrenArray.map(child => {
+    const {
+      id,
+      children,
+      disabled,
+      iconName,
+      iconType,
+      classNames,
+      size: buttonSize
+    } = child.props;
+    return {
+      key: id,
+      disabled,
+      classNames,
+      label: children,
+      iconLeft: iconName,
+      iconLeftType: iconType,
+      customComponent: children,
+      optionSize: buttonSize ?? size
+    };
+  });
+  const moreTabSelectedId = (0, _lodash.includes)(menuOptions.map(_ref2 => {
+    let {
+      key
+    } = _ref2;
+    return key;
+  }), selectedButtonTabId) ? 'more-tab' : selectedButtonTabId;
+  const {
+    x,
+    y,
+    refs,
+    strategy
+  } = (0, _react2.useFloating)({
+    open: true,
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
+  });
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref3 => {
+    let {
+      isOpen,
+      onOpen,
+      cancelNext,
+      clickAway
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "ButtonTabDropdown",
+      ref: menuBtnRef
+    }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
+      ref: refs.setReference,
+      selectedButtonTabId: moreTabSelectedId,
+      onButtonTabSelect: (id, e) => {
+        e?.stopPropagation();
+        onOpen();
+      }
+    }), title), isOpen && /*#__PURE__*/React.createElement("div", {
+      onClickCapture: cancelNext,
+      ref: refs.setFloating,
+      style: {
+        display: 'flex',
+        position: strategy,
+        top: y ?? _space.spaceNone,
+        left: x ?? _space.spaceNone
+      }
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, {
+      onSelect: (option, e) => {
+        onTabSelect && onTabSelect(option.key, e);
+        clickAway();
+      },
+      size: size,
+      options: menuOptions,
+      onTabOut: clickAway,
+      selectedKeys: [selectedButtonTabId ?? '']
+    })));
+  });
+};
+exports.ButtonTabDropdown = ButtonTabDropdown;

package/lib/components/ButtonTabs/ButtonTabDropdown.js.flow

@@ -0,0 +1,125 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import {includes} from 'lodash';
+
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {ClickAway} from '../../utils/click-away';
+import type {AnchorType} from '../ButtonDropdown';
+import {Menu} from '../Menu';
+
+import type {ButtonTabProps} from './ButtonTab';
+import {ButtonTab} from './ButtonTab';
+
+
+export type ButtonTabDropdownProps = {
+  ...ButtonTabProps,
+  title: string,
+  anchorPosition?: AnchorType,
+  ...
+};
+
+export const ButtonTabDropdown = ({
+  title,
+  anchorPosition = 'bottom-end',
+  ...buttonTabProps
+}: ButtonTabDropdownProps): React.Node => {
+  const menuBtnRef = React.useRef();
+  const {
+    size,
+    children,
+    selectedButtonTabId,
+    onButtonTabSelect: onTabSelect,
+  } = buttonTabProps;
+  const childrenArray = React.Children.toArray(children);
+  const menuOptions = childrenArray.map((child) => {
+    const {
+      id,
+      children,
+      disabled,
+      iconName,
+      iconType,
+      classNames,
+      size: buttonSize,
+    } = child.props;
+    return {
+      key: id,
+      disabled,
+      classNames,
+      label: children,
+      iconLeft: iconName,
+      iconLeftType: iconType,
+      customComponent: children,
+      optionSize: buttonSize ?? size,
+    };
+  });
+  const moreTabSelectedId = includes(
+    menuOptions.map(({key}) => key),
+    selectedButtonTabId,
+  )
+    ? 'more-tab'
+    : selectedButtonTabId;
+
+  const {x, y, refs, strategy} = useFloating({
+    open: true,
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+  });
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
+        <div data-testid="ButtonTabDropdown" ref={menuBtnRef}>
+          <ButtonTab
+            {...buttonTabProps}
+            ref={refs.setReference}
+            selectedButtonTabId={moreTabSelectedId}
+            onButtonTabSelect={(id, e) => {
+              e?.stopPropagation();
+              onOpen();
+            }}
+          >
+            {title}
+          </ButtonTab>
+          {isOpen && (
+            <div
+              onClickCapture={cancelNext}
+              ref={refs.setFloating}
+              style={{
+                display: 'flex',
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+              }}
+            >
+              <Menu
+                onSelect={(option, e) => {
+                  onTabSelect && onTabSelect(option.key, e);
+                  clickAway();
+                }}
+                size={size}
+                options={menuOptions}
+                onTabOut={clickAway}
+                selectedKeys={[selectedButtonTabId ?? '']}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ButtonTabs = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ButtonTabDropdown = require("./ButtonTabDropdown");
 var _ButtonTabsModule = _interopRequireDefault(require("./ButtonTabs.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); }
@@ -19,18 +20,35 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size = 'medium',
     disabled,
     selectedButtonTabId,
-    onButtonTabSelect
+    onButtonTabSelect,
+    wrapAfter,
+    wrapTabTitle = 'more',
+    anchorPosition
   } = _ref;
   const childrenArray = React.Children.toArray(children);
-  const childrenWithProps = childrenArray.map((child, index) => {
+  let unwrappedNodes = childrenArray;
+  let wrappedNodes = [];
+  if (typeof wrapAfter === 'number' && wrapAfter > -1) {
+    unwrappedNodes = childrenArray.slice(0, wrapAfter);
+    wrappedNodes = childrenArray.slice(wrapAfter);
+    if (wrappedNodes.length) {
+      unwrappedNodes.push( /*#__PURE__*/React.createElement(_ButtonTabDropdown.ButtonTabDropdown, {
+        id: "more-tab",
+        title: wrapTabTitle,
+        iconName: "ellipsis-vertical",
+        anchorPosition: anchorPosition
+      }, wrappedNodes));
+    }
+  }
+  const childrenWithProps = unwrappedNodes.map((child, index) => {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       const {
         disabled: disabledChild,
         classNames: classNamesChild
       } = child.props;
       const isFirst = index === 0;
-      const isLast = index === childrenArray.length - 1;
-      const isSingleChild = childrenArray.length === 1;
+      const isLast = index === unwrappedNodes.length - 1;
+      const isSingleChild = unwrappedNodes.length === 1;
       return /*#__PURE__*/React.cloneElement(child, {
         ...child.props,
         isFluid,

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -3,6 +3,9 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import type {AnchorType} from '../ButtonDropdown';
+
+import {ButtonTabDropdown} from './ButtonTabDropdown';
 
 import css from './ButtonTabs.module.css';
 
@@ -16,7 +19,10 @@ export type ButtonTabsProps = {
   size?: 'medium' | 'small',
   disabled?: boolean,
   selectedButtonTabId?: string,
-  onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
+  onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
+  wrapAfter?: number,
+  wrapTabTitle?: string,
+  anchorPosition?: AnchorType,
 };
 
 export const ButtonTabs: React$AbstractComponent<
@@ -32,18 +38,42 @@ export const ButtonTabs: React$AbstractComponent<
       disabled,
       selectedButtonTabId,
       onButtonTabSelect,
+      wrapAfter,
+      wrapTabTitle = 'more',
+      anchorPosition,
     }: ButtonTabsProps,
     ref,
   ): React.Node => {
     const childrenArray = React.Children.toArray(children);
 
-    const childrenWithProps = childrenArray.map((child, index) => {
+    let unwrappedNodes = childrenArray;
+    let wrappedNodes = [];
+
+    if (typeof wrapAfter === 'number' && wrapAfter > -1) {
+      unwrappedNodes = childrenArray.slice(0, wrapAfter);
+      wrappedNodes = childrenArray.slice(wrapAfter);
+
+      if (wrappedNodes.length) {
+        unwrappedNodes.push(
+          <ButtonTabDropdown
+            id="more-tab"
+            title={wrapTabTitle}
+            iconName="ellipsis-vertical"
+            anchorPosition={anchorPosition}
+          >
+            {wrappedNodes}
+          </ButtonTabDropdown>,
+        );
+      }
+    }
+
+    const childrenWithProps = unwrappedNodes.map((child, index) => {
       if (React.isValidElement(child)) {
         const {disabled: disabledChild, classNames: classNamesChild} =
           child.props;
         const isFirst = index === 0;
-        const isLast = index === childrenArray.length - 1;
-        const isSingleChild = childrenArray.length === 1;
+        const isLast = index === unwrappedNodes.length - 1;
+        const isSingleChild = unwrappedNodes.length === 1;
 
         return React.cloneElement(child, {
           ...child.props,

package/lib/components/Chip/Chip.js

@@ -32,16 +32,42 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconName = '',
     iconType = 'regular',
     showStatusIndicator,
-    disableHoverState = false,
     dismissable = false,
     onDismiss = () => null,
     onClick,
     disabled,
-    ...rest
+    disableHoverState = !onClick,
+    // There is no reason for hover state to be active when there is no click handler attached
+    ...restProps
   } = _ref;
+  /**
+   * Note (Nishant): Why we are using a `div` to render a onclick element instead of a `button`?
+   *
+   * Rendering the `Chip` component as a button directly would have been ideal, as it would
+   * have naturally handled interactivity and accessibility for clickable chips(which has an onClick). However,
+   * the `Chip` component includes a `CloseIcon`, which itself is a button. Nesting a `<button>`
+   * inside another `<button>` is semantically incorrect and would lead to improper HTML structure.
+   *
+   * Instead, we use a `<div>` with `role="button"` to maintain proper semantic behavior and
+   * avoid nesting buttons. While `role="button"` provides the appropriate semantics, it does
+   * not automatically handle keyboard interactions. Therefore, we manually handle `Enter`
+   * and `Space` key events to ensure the component is fully accessible and keyboard-compliant.
+   *
+   * Although this method might seem less conventional, it simplifies implementation and ensures
+   * backward compatibility while adhering to accessibility standards.
+   */
+  const handleKeyDown = event => {
+    const {
+      key
+    } = event;
+    if (key === 'Enter' || key === ' ') {
+      event.preventDefault(); // Prevent default action for Enter and Space keys
+      onClick?.(event);
+    }
+  };
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-testid": "Chip"
-  }, rest, {
+  }, restProps, {
     ref: ref,
     className: (0, _classify.classify)(_ChipModule.default.chipWrapper, {
       [_ChipModule.default.primary]: semantic === CHIP_SEMANTIC.primary,
@@ -57,7 +83,10 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.disabled]: disabled,
       [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState
     }, classNames?.wrapper),
-    onClick: onClick
+    onClick: onClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: showStatusIndicator || disableHoverState ? undefined : 0,
+    role: showStatusIndicator || disableHoverState ? undefined : 'button'
   }), showStatusIndicator && size !== 'small' && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
     status: semantic,
     classNames: {

package/lib/components/Chip/Chip.js.flow

@@ -55,6 +55,7 @@ export type SmallChipProps = {
 };
 
 export type ChipProps = MediumChipProps | SmallChipProps;
+
 export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
   React.forwardRef<ChipProps, HTMLDivElement>(
     (
@@ -66,76 +67,105 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
         iconName = '',
         iconType = 'regular',
         showStatusIndicator,
-        disableHoverState = false,
         dismissable = false,
         onDismiss = () => null,
         onClick,
         disabled,
-        ...rest
+        disableHoverState = !onClick, // There is no reason for hover state to be active when there is no click handler attached
+        ...restProps
       }: ChipProps,
       ref,
-    ): React.Node => (
-      <div
-        data-testid="Chip"
-        {...rest}
-        ref={ref}
-        className={classify(
-          css.chipWrapper,
-          {
-            [css.primary]: semantic === CHIP_SEMANTIC.primary,
-            [css.information]: semantic === CHIP_SEMANTIC.information,
-            [css.success]: semantic === CHIP_SEMANTIC.success,
-            [css.warning]: semantic === CHIP_SEMANTIC.warning,
-            [css.danger]: semantic === CHIP_SEMANTIC.danger,
-            [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
-            [css.medium]: size === 'medium',
-            [css.small]: size === 'small',
-            [css.dismissable]: dismissable,
-            [css.withIcon]: !!iconName && size !== 'small',
-            [css.disabled]: disabled,
-            [css.noHoverState]: showStatusIndicator || disableHoverState,
-          },
-          classNames?.wrapper,
-        )}
-        onClick={onClick}
-      >
-        {showStatusIndicator && size !== 'small' && (
-          <StatusIndicator
-            status={semantic}
-            classNames={{
-              wrapper: classify(
-                css.statusIndicatorBlock,
-                classNames?.statusIndicator,
-              ),
-            }}
-            disabled={disabled}
-          />
-        )}
+    ): React.Node => {
+      /**
+       * Note (Nishant): Why we are using a `div` to render a onclick element instead of a `button`?
+       *
+       * Rendering the `Chip` component as a button directly would have been ideal, as it would
+       * have naturally handled interactivity and accessibility for clickable chips(which has an onClick). However,
+       * the `Chip` component includes a `CloseIcon`, which itself is a button. Nesting a `<button>`
+       * inside another `<button>` is semantically incorrect and would lead to improper HTML structure.
+       *
+       * Instead, we use a `<div>` with `role="button"` to maintain proper semantic behavior and
+       * avoid nesting buttons. While `role="button"` provides the appropriate semantics, it does
+       * not automatically handle keyboard interactions. Therefore, we manually handle `Enter`
+       * and `Space` key events to ensure the component is fully accessible and keyboard-compliant.
+       *
+       * Although this method might seem less conventional, it simplifies implementation and ensures
+       * backward compatibility while adhering to accessibility standards.
+       */
+      const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
+        const {key} = event;
+        if (key === 'Enter' || key === ' ') {
+          event.preventDefault(); // Prevent default action for Enter and Space keys
+          onClick?.(event);
+        }
+      };
+
+      return (
+        <div
+          data-testid="Chip"
+          {...restProps}
+          ref={ref}
+          className={classify(
+            css.chipWrapper,
+            {
+              [css.primary]: semantic === CHIP_SEMANTIC.primary,
+              [css.information]: semantic === CHIP_SEMANTIC.information,
+              [css.success]: semantic === CHIP_SEMANTIC.success,
+              [css.warning]: semantic === CHIP_SEMANTIC.warning,
+              [css.danger]: semantic === CHIP_SEMANTIC.danger,
+              [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
+              [css.medium]: size === 'medium',
+              [css.small]: size === 'small',
+              [css.dismissable]: dismissable,
+              [css.withIcon]: !!iconName && size !== 'small',
+              [css.disabled]: disabled,
+              [css.noHoverState]: showStatusIndicator || disableHoverState,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onClick}
+          onKeyDown={handleKeyDown}
+          tabIndex={showStatusIndicator || disableHoverState ? undefined : 0}
+          role={showStatusIndicator || disableHoverState ? undefined : 'button'}
+        >
+          {showStatusIndicator && size !== 'small' && (
+            <StatusIndicator
+              status={semantic}
+              classNames={{
+                wrapper: classify(
+                  css.statusIndicatorBlock,
+                  classNames?.statusIndicator,
+                ),
+              }}
+              disabled={disabled}
+            />
+          )}
 
-        {iconName && size !== 'small' && (
-          <Icon
-            className={classify(css.chipIcon, classNames?.icon)}
-            name={iconName}
-            type={iconType}
-            size="small"
-          />
-        )}
-        <Truncate>{children}</Truncate>
+          {iconName && size !== 'small' && (
+            <Icon
+              className={classify(css.chipIcon, classNames?.icon)}
+              name={iconName}
+              type={iconType}
+              size="small"
+            />
+          )}
+          <Truncate>{children}</Truncate>
 
-        {dismissable && size !== 'small' && (
-          <CloseIcon
-            className={css.dismissIcon}
-            type={iconType}
-            size="small"
-            ariaLabel="Dismiss"
-            onClick={(event) => {
-              event.stopPropagation();
-              if (!disabled && onDismiss) {
-                onDismiss(event);
-              }
-            }}
-          />
-        )}
-      </div>
-    ),
+          {dismissable && size !== 'small' && (
+            <CloseIcon
+              className={css.dismissIcon}
+              type={iconType}
+              size="small"
+              ariaLabel="Dismiss"
+              onClick={(event) => {
+                event.stopPropagation();
+                if (!disabled && onDismiss) {
+                  onDismiss(event);
+                }
+              }}
+            />
+          )}
+        </div>
+      );
+    },
   );

package/lib/components/Chip/Chip.module.css

@@ -12,7 +12,8 @@
   colorGrayLightest,
   colorFillNone,
   colorTextDisabled,
-  colorFillDisabled
+  colorFillDisabled,
+  colorFocusPrimary
 ) from '../../styles/variables/_color.css';
 @value (
   spaceNone,
@@ -28,6 +29,11 @@
   size26
 ) from '../../styles/variables/_size.css';
 
+@value (
+  borderWidthNone,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
 .chipWrapper {
   composes: formLabelSmall from '../../styles/typography.module.css';
   composes: motionEaseInEaseOut from '../../styles/animation.module.css';
@@ -41,6 +47,12 @@
   cursor: pointer;
 }
 
+.chipWrapper:focus {
+  outline: none;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
 .medium {
   height: size26;
   min-height: size26;

package/package.json

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