@enact/limestone 1.3.0

package/TooltipDecorator/TooltipDecorator.d.ts

@@ -0,0 +1,229 @@
+// Type definitions for limestone/TooltipDecorator
+
+import * as React from "react";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface TooltipDecoratorConfig extends Object {
+  /**
+ * The boundary around the screen which the tooltip should never cross, typically involving
+flipping to an alternate orientation or adjusting its offset to remain on screen.
+The default of 48 is derived from a standard 24px screen-keepout size plus the standard
+Spotlight-outset (24px) margin/padding value which keeps elements and text aligned inside a
+  . Note: This value will be scaled according to the
+resolution.
+ */
+  screenEdgeKeepout?: number;
+  /**
+ * The name of the property which will receive the tooltip node.
+ * 
+ * By default,  `TooltipDecorator`  will add a new child to the wrapped component, following any
+other children passed in. If a component needs to, it can specify another property to receive
+the tooltip and the  `children`  property will not be modified.
+ */
+  tooltipDestinationProp?: string;
+}
+export interface TooltipDecoratorProps {
+  /**
+   * Disables the component but does not affect tooltip operation.
+   */
+  disabled?: boolean;
+  /**
+   * Time to wait (in milliseconds) before showing tooltip on hover.
+   */
+  tooltipDelay?: number;
+  /**
+ * Allows the tooltip to marquee.
+ * 
+ * Specifying a   
+restricts the marquee to that size.
+ */
+  tooltipMarquee?: boolean;
+  /**
+ * Position of the tooltip with respect to the wrapped component.
+ * _Value_ _Tooltip Direction_ `'above'` Above component, flowing to the right `'above center'` Above component, centered `'above left'` Above component, flowing to the left `'above right'` Above component, flowing to the right `'below'` Below component, flowing to the right `'below center'` Below component, centered `'below left'` Below component, flowing to the left `'below right'` Below component, flowing to the right `'left bottom'` Left of the component, contents at the bottom `'left middle'` Left of the component, contents middle aligned `'left top'` Left of the component, contents at the top `'right bottom'` Right of the component, contents at the bottom `'right middle'` Right of the component, contents middle aligned `'right top'` Right of the component, contents at the top 
+ * `TooltipDecorator`  attempts to choose the best direction to meet layout and language
+requirements. Left and right directions will reverse for RTL languages. Additionally,
+the tooltip will reverse direction if it will prevent overflowing off the viewport
+ * 
+ * For  `type="balloon"` , the default is  `"top right"` 
+For  `type="transparent"` , the default is  `"bottom center"`
+ */
+  tooltipPosition?:
+    | "above"
+    | "above center"
+    | "above left"
+    | "above right"
+    | "below"
+    | "below center"
+    | "below left"
+    | "below right"
+    | "left bottom"
+    | "left middle"
+    | "left top"
+    | "right bottom"
+    | "right middle"
+    | "right top";
+  /**
+   * Properties to be passed to tooltip component.
+   */
+  tooltipProps?: object;
+  /**
+ * Positions the tooltip relative to its container.
+ * 
+ * Determines whether your tooltip should position itself relative to its container or
+relative to the screen (absolute positioning on the floating layer). When setting to
+ `true` , to enable relative positioning, it may be important to specify the
+ `tooltipDestinationProp`  key in this HoC's config object. A relatively positioned
+Tooltip for a  `Button` , for example, must be placed in the  `decoration`  prop.
+ * 
+ * It may be necessary to assign the CSS rule  `position`  to the containing element so
+relatively positioned Tooltip has a frame to "stick to" the edge of.
+ * 
+ * Anchoring points can be visualized as follows:
+ * ```
+┌───◎───┐
+◎       ◎
+└───◎───┘
+```
+ */
+  tooltipRelative?: boolean;
+  /**
+   * Tooltip content.
+   */
+  tooltipText?: string | React.ReactNode;
+  /**
+   * Type of tooltip.
+   * _Value_ _Tooltip Appearance_ `'balloon'` Tooltip with a border, background and arrow to the activator `'transparent'` Text only without any of the decorations above */
+  tooltipType?: "balloon" | "transparent";
+  /**
+ * The interval (in milliseconds) to recheck the math for a currently showing tooltip's
+positioning and orientation. Useful if your anchor element moves.
+ */
+  tooltipUpdateDelay?: number;
+  /**
+ * The width of tooltip content.
+ * 
+ * Value expects a number of pixels, which will be automatically scaled to the
+appropriate size given the current screen resolution, or a string value containing a
+measurement and a valid CSS unit included. If the content goes over the given width,
+it will automatically wrap, or marquee if  `marquee`  is enabled.
+ * 
+ * When  `null` , content will auto-size and not wrap. If  `tooltipMarquee`  is also
+enabled, marqueeing will begin when the width is greater than the default (theme
+specified) width.
+ */
+  tooltipWidth?: number | string;
+}
+export function TooltipDecorator<P>(
+  config: TooltipDecoratorConfig,
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & TooltipDecoratorProps>;
+
+export function TooltipDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & TooltipDecoratorProps>;
+
+export interface TooltipBaseProps {
+  /**
+   * The node to be displayed as the main content of the tooltip.
+   */
+  children: React.ReactNode;
+  /**
+ * Position of tooltip arrow in relation to the activator.
+ * 
+ * Note that  `'left'` ,  `'center'` ,  `'right'`  are applicable when direction is in vertical
+orientation (i.e.  `'above'` ,  `'below'` ), and  `'top'` ,  `'middle'` , and  `'bottom'`  are
+applicable when direction is in horizontal orientation (i.e.  `'left'` ,  `'right'` )
+ * 
+ * For  `type="balloon"` , the default is  `"right"` 
+For  `type="transparent"` , the default is  `"center"`  (The arrow will not be visible)
+ */
+  arrowAnchor?: "left" | "center" | "right" | "top" | "middle" | "bottom";
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `tooltip`  - The root component class
+ * *  `tooltipLabel`  - Applied the label node
+ */
+  css?: object;
+  /**
+ * Direction of label in relation to the activator.
+ * 
+ * For  `type="balloon"` , the default is  `"above"` 
+For  `type="transparent"` , the default is  `"below"`
+ */
+  direction?: "above" | "below" | "left" | "right";
+  /**
+ * A value representing the amount to offset the label portion of the tooltip.
+ * 
+ * In a "center" aligned tooltip, the label may be desirable to offset to one side or the
+other. This prop accepts a value between -0.5 and 0.5 (representing 50% to the left or
+right). This defaults to 0 offset (centered). It also automatically caps the value so it
+never positions the tooltip label past the anchored arrow. If the tooltip label or arrow
+has non-rectangular geometry (rounded corners, a wide tail, etc.), you'll need to manually
+account for that in your provided offset value.
+ */
+  labelOffset?: number;
+  /**
+ * Allows the tooltip to marquee.
+ * 
+ * Specifying a    restricts
+the marquee to that size.
+ */
+  marquee?: boolean;
+  /**
+   * Style object for tooltip position.
+   */
+  position?: object;
+  /**
+ * Anchors the tooltip relative to its container.
+ * 
+ * Reconfigures the component to anchor itself to the designated edge of its container.
+When this is not specified, the implication is that the component is "absolutely"
+positioned, relative to the viewport, rather than its parent layer.
+ */
+  relative?: boolean;
+  /**
+   * Called when the tooltip mounts/unmounts, giving a reference to the DOM.
+   */
+  tooltipRef?: object | Function;
+  /**
+   * Type of tooltip.
+   * _Value_ _Tooltip Appearance_ `'balloon'` Tooltip with a border, background and arrow to the activator `'transparent'` Text only without any of the decorations above */
+  type?: "balloon" | "transparent";
+  /**
+ * The width of tooltip content.
+ * 
+ * Value expects a number of pixels, which will be automatically scaled to the appropriate
+size given the current screen resolution, or a string value containing a measurement and
+a valid CSS unit included.
+If the content goes over the given width, it will automatically wrap, or marquee if
+ `marquee`  is enabled.
+ * 
+ * When  `null` , content will auto-size and not wrap. If  `marquee`  is also enabled,
+marqueeing will begin when the width is greater than the default (theme specified) width.
+ */
+  width?: number | string;
+}
+/**
+ * A stateless tooltip component with Limestone styling applied.
+ */
+
+export class TooltipBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, TooltipBaseProps>
+> {}
+
+export interface TooltipProps {}
+/**
+ * A tooltip component with Limestone styling applied.
+ */
+
+export class Tooltip extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, TooltipProps>
+> {}
+
+export default TooltipDecorator;

package/TooltipDecorator/TooltipDecorator.js

@@ -0,0 +1,260 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip.Tooltip;
+  }
+});
+Object.defineProperty(exports, "TooltipBase", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip.TooltipBase;
+  }
+});
+exports["default"] = exports.TooltipDecorator = void 0;
+Object.defineProperty(exports, "useTooltip", {
+  enumerable: true,
+  get: function get() {
+    return _useTooltip2.useTooltip;
+  }
+});
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Tooltip = require("./Tooltip");
+var _useTooltip2 = require("./useTooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+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); } /**
+ * Limestone styled tooltip components.
+ *
+ * @module limestone/TooltipDecorator
+ * @exports Tooltip
+ * @exports TooltipBase
+ * @exports TooltipDecorator
+ */ /**
+ * Default config for {@link limestone/TooltipDecorator.TooltipDecorator|TooltipDecorator}
+ *
+ * @memberof limestone/TooltipDecorator.TooltipDecorator
+ * @hocconfig
+ */
+var defaultConfig = {
+  /**
+   * The boundary around the screen which the tooltip should never cross, typically involving
+   * flipping to an alternate orientation or adjusting its offset to remain on screen.
+   * The default of 48 is derived from a standard 24px screen-keepout size plus the standard
+   * Spotlight-outset (24px) margin/padding value which keeps elements and text aligned inside a
+   * {@link limestone/Panels.Panel|Panel}. Note: This value will be scaled according to the
+   * resolution.
+   *
+   * @type {Number}
+   * @default 48
+   * @memberof limestone/TooltipDecorator.TooltipDecorator.defaultConfig
+   */
+  screenEdgeKeepout: _useTooltip2.defaultScreenEdgeKeepout,
+  /**
+   * The name of the property which will receive the tooltip node.
+   *
+   * By default, `TooltipDecorator` will add a new child to the wrapped component, following any
+   * other children passed in. If a component needs to, it can specify another property to receive
+   * the tooltip and the `children` property will not be modified.
+   *
+   * @type {String}
+   * @default 'children'
+   * @memberof limestone/TooltipDecorator.TooltipDecorator.defaultConfig
+   */
+  tooltipDestinationProp: 'children'
+};
+
+/**
+ * A higher-order component which positions {@link limestone/TooltipDecorator.Tooltip|Tooltip} in
+ * relation to the wrapped component.
+ *
+ * The tooltip is automatically displayed when the decorated component is focused after a set
+ * period of time.
+ *
+ * The tooltip is positioned around the decorator where there is available window space.
+ *
+ * Note that the direction of tooltip will be flipped horizontally in RTL locales.
+ *
+ * @class TooltipDecorator
+ * @memberof limestone/TooltipDecorator
+ * @hoc
+ * @public
+ */
+var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
+  var screenEdgeKeepout = config.screenEdgeKeepout,
+    tooltipDestinationProp = config.tooltipDestinationProp;
+  var Decorator = function Decorator(props) {
+    var _useTooltip = (0, _useTooltip2.useTooltip)(_objectSpread({
+        screenEdgeKeepout: screenEdgeKeepout
+      }, props)),
+      tooltip = _useTooltip.tooltip,
+      handlers = _useTooltip.handlers,
+      restProps = _useTooltip.restProps;
+    if (tooltip) {
+      if (tooltipDestinationProp === 'children') {
+        restProps.children = [props.children, tooltip];
+      } else {
+        restProps[tooltipDestinationProp] = tooltip;
+      }
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, restProps), handlers));
+  };
+  Decorator.displayName = 'TooltipDecorator';
+  Decorator.propTypes = /** @lends limestone/TooltipDecorator.TooltipDecorator.prototype */{
+    /**
+     * Disables the component but does not affect tooltip operation.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * Indicates the tooltip text direction is right-to-left.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    rtl: _propTypes["default"].bool,
+    /**
+     * Time to wait (in milliseconds) before showing tooltip on hover.
+     *
+     * @type {Number}
+     * @default 500
+     * @public
+     */
+    tooltipDelay: _propTypes["default"].number,
+    /**
+     * Allows the tooltip to marquee.
+     *
+     * Specifying a {@link limestone/TooltipDecorator.TooltipDecorator.tooltipWidth|tooltipWidth}
+     * restricts the marquee to that size.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    tooltipMarquee: _propTypes["default"].bool,
+    /**
+     * Position of the tooltip with respect to the wrapped component.
+     *
+     * | *Value* | *Tooltip Direction* |
+     * |---|---|
+     * | `'above'` | Above component, flowing to the right |
+     * | `'above center'` | Above component, centered |
+     * | `'above left'` | Above component, flowing to the left |
+     * | `'above right'` | Above component, flowing to the right |
+     * | `'below'` | Below component, flowing to the right |
+     * | `'below center'` | Below component, centered |
+     * | `'below left'` | Below component, flowing to the left |
+     * | `'below right'` | Below component, flowing to the right |
+     * | `'left bottom'` | Left of the component, contents at the bottom |
+     * | `'left middle'` | Left of the component, contents middle aligned |
+     * | `'left top'` | Left of the component, contents at the top |
+     * | `'right bottom'` | Right of the component, contents at the bottom |
+     * | `'right middle'` | Right of the component, contents middle aligned |
+     * | `'right top'` | Right of the component, contents at the top |
+     *
+     * `TooltipDecorator` attempts to choose the best direction to meet layout and language
+     * requirements. Left and right directions will reverse for RTL languages. Additionally,
+     * the tooltip will reverse direction if it will prevent overflowing off the viewport
+     *
+     * For `type="balloon"`, the default is `"top right"`
+     * For `type="transparent"`, the default is `"bottom center"`
+     *
+     * @type {('above'|'above center'|'above left'|'above right'|'below'|
+     *  'below center'|'below left'|'below right'|'left bottom'|'left middle'|'left top'|
+     * 	'right bottom'|'right middle'|'right top')}
+     * @public
+     */
+    tooltipPosition: _propTypes["default"].oneOf(['above', 'above center', 'above left', 'above right', 'below', 'below center', 'below left', 'below right', 'left bottom', 'left middle', 'left top', 'right bottom', 'right middle', 'right top']),
+    /**
+     * Properties to be passed to tooltip component.
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipProps: _propTypes["default"].object,
+    /**
+     * Positions the tooltip relative to its container.
+     *
+     * Determines whether your tooltip should position itself relative to its container or
+     * relative to the screen (absolute positioning on the floating layer). When setting to
+     * `true`, to enable relative positioning, it may be important to specify the
+     * `tooltipDestinationProp` key in this HoC's config object. A relatively positioned
+     * Tooltip for a `Button`, for example, must be placed in the `decoration` prop.
+     *
+     * It may be necessary to assign the CSS rule `position` to the containing element so
+     * relatively positioned Tooltip has a frame to "stick to" the edge of.
+     *
+     * Anchoring points can be visualized as follows:
+     * ```
+     * ┌───◎───┐
+     * ◎       ◎
+     * └───◎───┘
+     * ```
+     *
+     * @type {Boolean}
+     * @public
+     */
+    tooltipRelative: _propTypes["default"].bool,
+    /**
+     * Tooltip content.
+     *
+     * @type {String|Node}
+     * @public
+     */
+    tooltipText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+    /**
+     * Type of tooltip.
+     *
+     * | *Value* | *Tooltip Appearance* |
+     * |---|---|
+     * | `'balloon'` | Tooltip with a border, background and arrow to the activator |
+     * | `'transparent'` | Text only without any of the decorations above |
+     *
+     * @type {('balloon'|'transparent')}
+     * @default 'balloon'
+     * @public
+     */
+    tooltipType: _propTypes["default"].oneOf(['balloon', 'transparent']),
+    /**
+     * The interval (in milliseconds) to recheck the math for a currently showing tooltip's
+     * positioning and orientation. Useful if your anchor element moves.
+     *
+     * @type {Number}
+     * @default 400
+     * @public
+     */
+    tooltipUpdateDelay: _propTypes["default"].number,
+    /**
+     * The width of tooltip content.
+     *
+     * Value expects a number of pixels, which will be automatically scaled to the
+     * appropriate size given the current screen resolution, or a string value containing a
+     * measurement and a valid CSS unit included. If the content goes over the given width,
+     * it will automatically wrap, or marquee if `marquee` is enabled.
+     *
+     * When `null`, content will auto-size and not wrap. If `tooltipMarquee` is also
+     * enabled, marqueeing will begin when the width is greater than the default (theme
+     * specified) width.
+     *
+     * @type {Number|String}
+     * @public
+     */
+    tooltipWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
+  };
+  return (0, _I18nDecorator.I18nContextDecorator)({
+    rtlProp: 'rtl'
+  }, Decorator);
+});
+var _default = exports["default"] = TooltipDecorator;

package/TooltipDecorator/TooltipLabel.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TooltipLabel = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/i18n/util");
+var _resolution = require("@enact/ui/resolution");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Marquee = _interopRequireDefault(require("../Marquee"));
+var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["centered", "children", "marquee"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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; }
+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); } /**
+ * {@link limestone/TooltipDecorator.TooltipLabel} is a stateless tooltip component with
+ * Limestone styling applied.
+ *
+ * @class TooltipLabel
+ * @memberof limestone/TooltipDecorator
+ * @ui
+ * @private
+ */
+var TooltipLabel = exports.TooltipLabel = (0, _kind["default"])({
+  name: 'TooltipLabel',
+  propTypes: /** @lends limestone/TooltipDecorator.TooltipLabel.prototype */{
+    /**
+     * The node to be displayed as the main content of the tooltip.
+     *
+     * @type {Node}
+     * @required
+     */
+    children: _propTypes["default"].node.isRequired,
+    /**
+     * Centers the text when `marquee` is also set.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    centered: _propTypes["default"].bool,
+    /**
+     * Apply a marquee to support long text.
+     *
+     * It is recommended that you specify a `width` also. If none is specified, a default width
+     * of 600px will be used.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    marquee: _propTypes["default"].bool,
+    /**
+     * The width of tooltip content.
+     *
+     * Value expects a number of pixels, which will be automatically scaled to the appropriate
+     * size given the current screen resolution, or a string value containing a measurement and
+     * a valid CSS unit included.
+     * If the content goes over the given width, it will automatically wrap, or marquee if
+     * `marquee` is enabled.
+     *
+     * When `null`, content will auto-size and not wrap. If `marquee` is also enabled,
+     * marqueeing will begin when the width is greater than the default (theme specified) width.
+     *
+     * @type {Number|String}
+     * @public
+     */
+    width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
+  },
+  styles: {
+    css: _TooltipModule["default"]
+  },
+  computed: {
+    className: function className(_ref) {
+      var marquee = _ref.marquee,
+        width = _ref.width,
+        styler = _ref.styler;
+      return styler.append({
+        multi: !marquee && !!width,
+        marquee: marquee
+      });
+    },
+    style: function style(_ref2) {
+      var children = _ref2.children,
+        width = _ref2.width,
+        _style = _ref2.style;
+      return _objectSpread(_objectSpread({}, _style), {}, {
+        direction: (0, _util.isRtlText)(children) ? 'rtl' : 'ltr',
+        '--lime-tooltip-label-width': typeof width === 'number' ? (0, _resolution.scaleToRem)(width) : width
+      });
+    }
+  },
+  render: function render(_ref3) {
+    var centered = _ref3.centered,
+      children = _ref3.children,
+      marquee = _ref3.marquee,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+    delete rest.width;
+    if (marquee) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee["default"], _objectSpread(_objectSpread({}, rest), {}, {
+        alignment: centered ? 'center' : null,
+        marqueeOn: "render",
+        children: children
+      }));
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+        children: children
+      }));
+    }
+  }
+});
+var _default = exports["default"] = TooltipLabel;

package/TooltipDecorator/package.json

@@ -0,0 +1,3 @@
+{
+    "main": "TooltipDecorator.js"
+}