@enact/limestone 1.3.0

package/Chips/Chip.js

@@ -0,0 +1,252 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.chipDeleteButtonShape = exports.ChipDecorator = exports.ChipBase = exports.Chip = void 0;
+var _util = require("@enact/core/util");
+var _spotlight = _interopRequireWildcard(require("@enact/spotlight"));
+var _target = require("@enact/spotlight/src/target");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _react = require("react");
+var _Button = _interopRequireDefault(require("../Button"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _Chips = require("./Chips");
+var _ChipModule = _interopRequireDefault(require("./Chip.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "className", "deleteButton", "disabled", "icon", "id", "onClick", "ref"];
+/**
+ * The shape of the chip delete button for {@link limestone/Chips.Chip|Chip}.
+ *
+ * @typedef {Object} chipDeleteButtonShape
+ * @memberof limestone/Chips
+ * @property {String|Object} icon The icon to display in the delete button.
+ * @property {Function} onDelete The function to call when the delete button is clicked.
+ * @property {('top'|'bottom'|'right')} position The position of the delete button relative to the chip.
+ * @public
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var chipDeleteButtonShape = exports.chipDeleteButtonShape = _propTypes["default"].shape({
+  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  onDelete: _propTypes["default"].func,
+  position: _propTypes["default"].oneOf(['top', 'bottom', 'right'])
+});
+var ChipDefaultProps = {
+  disabled: false
+};
+
+/**
+ * Provides Limestone styled Chip component and behaviors.
+ *
+ * Usage:
+ * ```
+ * <Chip
+ * 	deleteButton={{
+ * 		icon: 'closex',
+ * 		position: 'right'
+ * 	}}
+ * 	icon="check"
+ * >
+ *  Label
+ * </Chip>
+ * ```
+ *
+ * @class Chip
+ * @memberof limestone/Chips
+ * @ui
+ * @public
+ */
+var ChipBase = exports.ChipBase = function ChipBase(props) {
+  var _use = (0, _react.use)(_Chips.ChipsContext),
+    handleChipDelete = _use.handleChipDelete,
+    getNextTargetFromDeleteButton = _use.getNextTargetFromDeleteButton,
+    registerChild = _use.registerChild;
+  var chipProps = (0, _util.setDefaultProps)(props, ChipDefaultProps);
+  var children = chipProps.children,
+    className = chipProps.className,
+    deleteButton = chipProps.deleteButton,
+    disabled = chipProps.disabled,
+    icon = chipProps.icon,
+    id = chipProps.id,
+    onClick = chipProps.onClick,
+    ref = chipProps.ref,
+    rest = _objectWithoutProperties(chipProps, _excluded);
+  var chipClassName = (0, _classnames["default"])(className, deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.position);
+  var buttonClassName = (0, _classnames["default"])(_ChipModule["default"].deleteButtonContainer, _ChipModule["default"][(deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.position) || 'right']);
+  var containerRef = (0, _react.useRef)(null);
+  var clientRef = (0, _react.useRef)(null);
+  var deleteButtonRef = (0, _react.useRef)(null);
+  var chipRef = clientRef || ref;
+  var isHovering = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (chipRef.current && registerChild) {
+      registerChild(chipRef, id);
+    }
+  }, [chipRef, registerChild, id]);
+  (0, _react.useEffect)(function () {
+    var handleDocumentClick = function handleDocumentClick(ev) {
+      if (containerRef.current && !containerRef.current.contains(ev.target)) {
+        var _deleteButtonRef$curr;
+        (_deleteButtonRef$curr = deleteButtonRef.current) === null || _deleteButtonRef$curr === void 0 || _deleteButtonRef$curr.classList.remove(_ChipModule["default"].focused);
+      }
+    };
+    document.addEventListener('click', handleDocumentClick, true);
+    return function () {
+      document.removeEventListener('click', handleDocumentClick, true);
+    };
+  }, []);
+  var handleKeyDown = (0, _react.useCallback)(function (ev) {
+    var keyCode = ev.keyCode,
+      target = ev.target;
+    var direction = (0, _spotlight.getDirection)(keyCode);
+    if (direction) {
+      var nextTarget = null;
+      if (target === deleteButtonRef.current.firstChild && getNextTargetFromDeleteButton) {
+        nextTarget = getNextTargetFromDeleteButton(direction, id);
+      }
+      if (nextTarget === null) {
+        nextTarget = (0, _target.getTargetByDirectionFromElement)(direction, target);
+      }
+      if (nextTarget === null) {
+        return;
+      }
+      _spotlight["default"].focus(nextTarget);
+      ev.stopPropagation();
+      if (nextTarget !== null && nextTarget !== deleteButtonRef.current.firstChild && nextTarget !== chipRef.current) {
+        var _deleteButtonRef$curr2;
+        (_deleteButtonRef$curr2 = deleteButtonRef.current) === null || _deleteButtonRef$curr2 === void 0 || _deleteButtonRef$curr2.classList.remove(_ChipModule["default"].focused);
+      }
+    }
+  }, [chipRef, getNextTargetFromDeleteButton, id]);
+  var handleMouseLeave = (0, _react.useCallback)(function (ev) {
+    if (containerRef.current.contains(ev.target)) {
+      var _deleteButtonRef$curr3;
+      (_deleteButtonRef$curr3 = deleteButtonRef.current) === null || _deleteButtonRef$curr3 === void 0 || _deleteButtonRef$curr3.classList.remove(_ChipModule["default"].focused);
+    }
+  }, []);
+  var handleFocus = (0, _react.useCallback)(function (ev) {
+    if (ev.target === chipRef.current) {
+      var _deleteButtonRef$curr4;
+      (_deleteButtonRef$curr4 = deleteButtonRef.current) === null || _deleteButtonRef$curr4 === void 0 || _deleteButtonRef$curr4.classList.add(_ChipModule["default"].focused);
+    }
+  }, [chipRef]);
+  var handleBlur = (0, _react.useCallback)(function () {
+    if (_spotlight["default"].getPointerMode() && !isHovering.current) {
+      var _deleteButtonRef$curr5;
+      (_deleteButtonRef$curr5 = deleteButtonRef.current) === null || _deleteButtonRef$curr5 === void 0 || _deleteButtonRef$curr5.classList.remove(_ChipModule["default"].focused);
+    }
+  }, []);
+  var handleMouseOver = (0, _react.useCallback)(function () {
+    isHovering.current = true;
+  }, []);
+  var handleMouseOut = (0, _react.useCallback)(function () {
+    isHovering.current = false;
+  }, []);
+  var handleDelete = (0, _react.useCallback)(function (ev) {
+    if (handleChipDelete) {
+      handleChipDelete(ev, id);
+    }
+    if (deleteButton !== null && deleteButton !== void 0 && deleteButton.onDelete) {
+      deleteButton.onDelete(ev);
+    }
+  }, [deleteButton, handleChipDelete, id]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+    className: _ChipModule["default"].chip,
+    onMouseLeave: handleMouseLeave,
+    onBlur: handleBlur,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onKeyDown: handleKeyDown,
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+      css: _ChipModule["default"],
+      className: chipClassName,
+      "data-chip-index": id,
+      disabled: disabled,
+      focusEffect: "static",
+      icon: icon ? icon : null,
+      size: "small",
+      onFocus: handleFocus,
+      onClick: onClick,
+      ref: chipRef,
+      roundBorder: true,
+      children: children
+    }), deleteButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: buttonClassName,
+      ref: deleteButtonRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        css: _ChipModule["default"],
+        backgroundOpacity: "transparent",
+        disabled: disabled,
+        icon: (deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.icon) || 'closex',
+        size: "small",
+        onClick: handleDelete,
+        roundBorder: true
+      })
+    })]
+  }));
+};
+ChipBase.displayName = 'Chip';
+ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
+  /**
+   * A label displayed in the chip content.
+   *
+   * @type {String}
+   * @required
+   * @public
+   */
+  children: _propTypes["default"].string.isRequired,
+  /**
+   * Unique identifier for the chip.
+   *
+   * @type {String}
+   * @required
+   * @public
+   */
+  id: _propTypes["default"].string.isRequired,
+  /**
+   * Define the icon, delete handler, and position for the delete button.
+   *
+   * @type {limestone/Chips.chipDeleteButtonShape|Boolean}
+   * @public
+   */
+  deleteButton: _propTypes["default"].oneOfType([chipDeleteButtonShape, _propTypes["default"].bool]),
+  /**
+   * Disables Chip and becomes non-interactive.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  disabled: _propTypes["default"].bool,
+  /**
+   * The icon content in the chip content.
+   * If this is specified, {@link limestone/Icon.Icon|Icon} will be shown as the content.
+   *
+   * @see {@link ui/Icon.Icon.children}
+   * @type {String|Object}
+   * @public
+   */
+  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])
+};
+
+/**
+ * Limestone-specific Chip behaviors to apply to {@link limestone/Chips.Chip|Chip}.
+ *
+ * @hoc
+ * @memberof limestone/Chips
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var ChipDecorator = exports.ChipDecorator = (0, _compose["default"])(_Skinnable["default"]);
+var Chip = exports.Chip = ChipDecorator(ChipBase);
+var _default = exports["default"] = Chip;

package/Chips/Chip.module.css

@@ -0,0 +1,30 @@
+.chip {
+  position: relative;
+  display: inline-block;
+}
+.chip .button.small {
+  margin: 0;
+  min-width: 2.25rem;
+}
+.chip .deleteButtonContainer {
+  position: absolute;
+  display: none;
+}
+.chip .deleteButtonContainer.right {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%) translateX(calc(100% + 0.25rem ));
+}
+.chip .deleteButtonContainer.bottom {
+  bottom: -0.25rem;
+  left: 50%;
+  transform: translate(-50%, 100%);
+}
+.chip .deleteButtonContainer.top {
+  top: calc(-100% - 0.25rem );
+  left: 50%;
+  transform: translateX(-50%);
+}
+.chip .focused {
+  display: block;
+}

package/Chips/Chips.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ChipsDecorator = exports.ChipsContext = exports.ChipsBase = exports.Chips = void 0;
+var _util = require("@enact/core/util");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _SpotlightContainerDecorator = require("@enact/spotlight/SpotlightContainerDecorator");
+var _container = require("@enact/spotlight/src/container");
+var _target = require("@enact/spotlight/src/target");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _react = require("react");
+var _ChipsModule = _interopRequireDefault(require("./Chips.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "className", "orientation"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var ChipsContext = exports.ChipsContext = /*#__PURE__*/(0, _react.createContext)({});
+var ChipsDefaultProps = {
+  orientation: 'vertical'
+};
+
+/**
+ * A container that surrounds the chips.
+ *
+ * Usage:
+ * ```
+ * <Chips>
+ * 	{chips.map(({id, icon, children}) => {
+ * 		return (
+ * 			<Chip key={id} icon={icon} onClick={onClick}>
+ * 				{children}
+ * 			</Chip>
+ * 		);
+ * 	})}
+ * </Chips>
+ * ```
+ *
+ * @class ChipsBase
+ * @memberof limestone/Chips
+ * @ui
+ * @public
+ */
+var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
+  var chipsProps = (0, _util.setDefaultProps)(props, ChipsDefaultProps);
+  var children = chipsProps.children,
+    className = chipsProps.className,
+    orientation = chipsProps.orientation,
+    rest = _objectWithoutProperties(chipsProps, _excluded);
+  var chipsClassName = (0, _classnames["default"])(_ChipsModule["default"].chips, _ChipsModule["default"][orientation], className);
+  var childRefs = (0, _react.useRef)([]);
+  var containerRef = (0, _react.useRef)(null);
+  var getPreviousChip = (0, _react.useCallback)(function (id) {
+    var currentIndex = childRefs.current.findIndex(function (child) {
+      return child.id === id;
+    });
+    return currentIndex > 0 ? childRefs.current[currentIndex - 1] : null;
+  }, []);
+  var getNextChip = (0, _react.useCallback)(function (id) {
+    var currentIndex = childRefs.current.findIndex(function (child) {
+      return child.id === id;
+    });
+    return currentIndex >= 0 && currentIndex < childRefs.current.length - 1 ? childRefs.current[currentIndex + 1] : null;
+  }, []);
+  var handleChipDelete = function handleChipDelete(ev, id) {
+    var prevNode = getPreviousChip(id);
+    var nextNode = getNextChip(id);
+    if (prevNode) {
+      _spotlight["default"].focus(prevNode.chipRef.current);
+    } else if (nextNode) {
+      _spotlight["default"].focus(nextNode.chipRef.current);
+    } else {
+      var rect = ev.target.getBoundingClientRect();
+      var position = {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      };
+      var containerIds = (0, _container.getAllContainerIds)();
+      containerRef.current.dataset.spotlightContainerDisabled = true;
+      var _iterator = _createForOfIteratorHelper(containerIds),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var containerId = _step.value;
+          var nearestTarget = (0, _target.getNearestTargetFromPosition)(position, containerId);
+          if (nearestTarget) {
+            _spotlight["default"].focus(nearestTarget);
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      containerRef.current.dataset.spotlightContainerDisabled = false;
+    }
+    childRefs.current = childRefs.current.filter(function (child) {
+      return child.id !== id;
+    });
+  };
+  var getNextTargetFromDeleteButton = (0, _react.useCallback)(function (direction, id) {
+    var nextTarget = null;
+    if (orientation === 'vertical' && direction === 'up' || orientation === 'horizontal' && direction === 'left') {
+      var prevChip = getPreviousChip(id);
+      nextTarget = prevChip ? prevChip.chipRef.current : null;
+    } else if (orientation === 'vertical' && direction === 'down' || orientation === 'horizontal' && direction === 'right') {
+      var nextChip = getNextChip(id);
+      nextTarget = nextChip ? nextChip.chipRef.current : null;
+    }
+    return nextTarget;
+  }, [getNextChip, getPreviousChip, orientation]);
+  var registerChild = (0, _react.useCallback)(function (chipRef, id) {
+    if (!childRefs.current.some(function (child) {
+      return child.id === id;
+    })) {
+      childRefs.current.push({
+        chipRef: chipRef,
+        id: id
+      });
+
+      // Sort childRefs to match the order of children array
+      var childrenArray = Array.isArray(children) ? children : [];
+      var childrenIdOrder = childrenArray.map(function (child) {
+        return child && child.props && child.props.id;
+      }).filter(Boolean); // Remove null, undefined
+
+      childRefs.current.sort(function (a, b) {
+        var indexA = childrenIdOrder.indexOf(a.id);
+        var indexB = childrenIdOrder.indexOf(b.id);
+
+        // IDs not in children array go to the end
+        if (indexA === -1 && indexB === -1) return 0;
+        if (indexA === -1) return 1;
+        if (indexB === -1) return -1;
+        return indexA - indexB;
+      });
+    }
+  }, [children]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+    className: chipsClassName,
+    ref: containerRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipsContext, {
+      value: {
+        getNextTargetFromDeleteButton: getNextTargetFromDeleteButton,
+        handleChipDelete: handleChipDelete,
+        registerChild: registerChild
+      },
+      children: children
+    })
+  }));
+};
+ChipsBase.displayName = 'Chips';
+ChipsBase.propTypes = /** @lends limestone/Chips.Chips.prototype */{
+  /**
+   * {@link limestone/Chips.Chip|Chip} to be rendered
+   *
+   * @type {Node}
+   * @public
+   */
+  children: _propTypes["default"].node,
+  /**
+   * The layout orientation of the component.
+   *
+   * @type {('horizontal'|'vertical')}
+   * @default 'vertical'
+   * @public
+   */
+  orientation: _propTypes["default"].oneOf(['horizontal', 'vertical'])
+};
+
+/**
+ * Applies Limestone specific behaviors to {@link limestone/Chips.Chips|Chips} components.
+ *
+ * @hoc
+ * @memberof limestone/Chips
+ * @mixes spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator
+ * @public
+ */
+var ChipsDecorator = exports.ChipsDecorator = (0, _compose["default"])((0, _SpotlightContainerDecorator.SpotlightContainerDecorator)({
+  enterTo: 'default-element',
+  leaveFor: {
+    up: '#right'
+  },
+  navigableFilter: function navigableFilter(node) {
+    if (!node) return false;
+    var rects = node.getBoundingClientRect();
+    return rects.width !== 0 && rects.height !== 0;
+  }
+}));
+
+/**
+ * A container that contains the basic behavior of {@link limestone/Chips.Chips|ChipsBase}.
+ * @class Chips
+ * @memberof limestone/Chips
+ * @extends limestone/Chips.ChipsBase
+ * @mixes spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator
+ * @see {@link limestone/Chips.Chips}
+ * @ui
+ * @public
+ */
+var Chips = exports.Chips = ChipsDecorator(ChipsBase);
+var _default = exports["default"] = Chips;

package/Chips/Chips.module.css

@@ -0,0 +1,8 @@
+.chips {
+  display: inline-flex;
+  gap: 0.75rem;
+}
+.chips.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}

package/Chips/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Chip", {
+  enumerable: true,
+  get: function get() {
+    return _Chip["default"];
+  }
+});
+Object.defineProperty(exports, "ChipBase", {
+  enumerable: true,
+  get: function get() {
+    return _Chip.ChipBase;
+  }
+});
+Object.defineProperty(exports, "ChipDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _Chip.ChipDecorator;
+  }
+});
+Object.defineProperty(exports, "Chips", {
+  enumerable: true,
+  get: function get() {
+    return _Chips["default"];
+  }
+});
+Object.defineProperty(exports, "ChipsBase", {
+  enumerable: true,
+  get: function get() {
+    return _Chips.ChipsBase;
+  }
+});
+Object.defineProperty(exports, "ChipsDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _Chips.ChipsDecorator;
+  }
+});
+Object.defineProperty(exports, "chipDeleteButtonShape", {
+  enumerable: true,
+  get: function get() {
+    return _Chip.chipDeleteButtonShape;
+  }
+});
+exports["default"] = void 0;
+var _Chip = _interopRequireWildcard(require("./Chip"));
+var _Chips = _interopRequireWildcard(require("./Chips"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Provides Limestone styled Chips and Chip comoponents and behaviors.
+ *
+ * @example
+ * <Chips orientation="horizontal">
+ * 	<Chip key="key1">
+ * 		Chip 1
+ * 	</Chip>
+ * 	<Chip key="key2" icon="check" deleteButton={{position: 'bottom'}}>
+ * 		Chip 2
+ * 	</Chip>
+ * 	<Chip key="key3" icon="heart" deleteButton={{position: 'right'}}>
+ * 		Chip 3
+ * 	</Chip>
+ * </Chips>
+ *
+ * @module limestone/Chips
+ * @exports Chip
+ * @exports ChipBase
+ * @exports ChipDecorator
+ * @exports chipDeleteButtonShape
+ * @exports Chips
+ * @exports ChipsBase
+ * @exports ChipsDecorator
+ */
+
+/**
+ * A shortcut to access {@link limestone/Chips.Chip}
+ *
+ * @name Chip
+ * @static
+ * @memberof limestone/Chips.Chips
+ */
+_Chips["default"].Chip = _Chip["default"];
+var _default = exports["default"] = _Chips["default"];