@bolio-ui/core 1.0.0

package/esm/select/stories.js

@@ -0,0 +1,239 @@
+import Select from '.';
+import Grid from '../grid';
+import Code from '../code';
+export default {
+  title: 'Data Entry/Select',
+  component: Select
+};
+export var Default = function Default() {
+  var handler = function handler(val) {
+    return console.log(val);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Select one",
+    onChange: handler
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Default"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    type: "primary",
+    initialValue: "1"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    type: "secondary",
+    initialValue: "2"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    type: "success",
+    initialValue: "1"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    type: "warning",
+    initialValue: "2"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    type: "error",
+    initialValue: "1"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    type: "info",
+    initialValue: "2"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))));
+};
+export var Disable = function Disable() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Select one",
+    disabled: true
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))));
+};
+export var DisabledOption = function DisabledOption() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Select one"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1",
+    disabled: true
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))));
+};
+export var WithoutIcon = function WithoutIcon() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Select one",
+    pure: true
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Value 2"))));
+};
+export var Labels = function Labels() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Technologies"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    label: true
+  }, "JavaScript"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "react"
+  }, "React"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "angular"
+  }, "Angular"), /*#__PURE__*/React.createElement(Select.Option, {
+    label: true
+  }, "Ruby"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "rails"
+  }, "Rails"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "php"
+  }, "PHP"))));
+};
+export var Divider = function Divider() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Technologies"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "react"
+  }, "React"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "angular"
+  }, "Angular"), /*#__PURE__*/React.createElement(Select.Option, {
+    divider: true
+  }), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "rails"
+  }, "Rails"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "php"
+  }, "PHP"))));
+};
+export var Multiple = function Multiple() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Technologies",
+    multiple: true,
+    width: "200px",
+    initialValue: ['1', '3', '4', '6']
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "React"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Angular"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "3"
+  }, "Vue"), /*#__PURE__*/React.createElement(Select.Option, {
+    divider: true
+  }), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "4"
+  }, "Rails"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "5"
+  }, "PHP"), /*#__PURE__*/React.createElement(Select.Option, {
+    divider: true
+  }), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "6"
+  }, "Express"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "7"
+  }, "Koa"))));
+};
+export var MultipleWithoutClear = function MultipleWithoutClear() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Technologies",
+    multiple: true,
+    width: "200px",
+    clearable: false,
+    initialValue: ['1', '3', '4', '6']
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "React"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Angular"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "3"
+  }, "Vue"), /*#__PURE__*/React.createElement(Select.Option, {
+    divider: true
+  }), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "4"
+  }, "Rails"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "5"
+  }, "PHP"), /*#__PURE__*/React.createElement(Select.Option, {
+    divider: true
+  }), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "6"
+  }, "Express"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "7"
+  }, "Koa"))));
+};
+export var Component = function Component() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Value one",
+    initialValue: "1"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, /*#__PURE__*/React.createElement(Code, null, "TypeScript")), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, /*#__PURE__*/React.createElement(Code, null, "JavaScript")))));
+};
+export var OverWidth = function OverWidth() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Choose one",
+    value: "1",
+    width: "150px"
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Truncate an overly long string"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Option 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "Choose one",
+    value: "1",
+    width: "150px",
+    disableMatchWidth: true
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "1"
+  }, "Autoscale option width when text is too long"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "2"
+  }, "Option 2"))));
+};

package/esm/select/styles.js

@@ -0,0 +1,48 @@
+export var getColors = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      border: palette.border,
+      borderActive: palette.foreground,
+      iconBorder: palette.accents_5,
+      placeholderColor: palette.accents_3
+    },
+    primary: {
+      border: palette.primary,
+      borderActive: palette.primary,
+      iconBorder: palette.primary,
+      placeholderColor: palette.accents_3
+    },
+    secondary: {
+      border: palette.secondary,
+      borderActive: palette.secondary,
+      iconBorder: palette.secondary,
+      placeholderColor: palette.accents_3
+    },
+    success: {
+      border: palette.success,
+      borderActive: palette.success,
+      iconBorder: palette.success,
+      placeholderColor: palette.accents_3
+    },
+    warning: {
+      border: palette.warning,
+      borderActive: palette.warning,
+      iconBorder: palette.warning,
+      placeholderColor: palette.accents_3
+    },
+    error: {
+      border: palette.error,
+      borderActive: palette.error,
+      iconBorder: palette.error,
+      placeholderColor: palette.error
+    },
+    info: {
+      border: palette.info,
+      borderActive: palette.info,
+      iconBorder: palette.info,
+      placeholderColor: palette.accents_3
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};

package/esm/shared/backdrop.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import CssTransition from './css-transition';
+import useCurrentState from '../utils/use-current-state';
+import useClasses from '../use-classes';
+var defaultProps = {
+  onClick: function onClick() {},
+  visible: false,
+  // onContentClick: () => {},
+  backdropClassName: '',
+  positionClassName: '',
+  layerClassName: ''
+};
+
+function BackdropComponent(_ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      visible = _ref.visible,
+      width = _ref.width,
+      onContentClick = _ref.onContentClick,
+      backdropClassName = _ref.backdropClassName,
+      positionClassName = _ref.positionClassName,
+      layerClassName = _ref.layerClassName,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useCurrentState = useCurrentState(false),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      setIsContentMouseDown = _useCurrentState2[1],
+      IsContentMouseDownRef = _useCurrentState2[2];
+
+  var clickHandler = function clickHandler(event) {
+    if (IsContentMouseDownRef.current) return;
+    onClick && onClick(event);
+  };
+
+  var mouseUpHandler = function mouseUpHandler() {
+    if (!IsContentMouseDownRef.current) return;
+    var timer = setTimeout(function () {
+      setIsContentMouseDown(false);
+      clearTimeout(timer);
+    }, 0);
+  };
+
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "backdrop-wrapper",
+    visible: visible,
+    clearTime: 300
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler,
+    onMouseUp: mouseUpHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (props && props.className != null && props.className || useClasses('backdrop', backdropClassName) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('layer', layerClassName) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    onClick: onContentClick,
+    onMouseDown: function onMouseDown() {
+      return setIsContentMouseDown(true);
+    },
+    className: _JSXStyle.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('position', positionClassName) || "")
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1944751280",
+    dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]
+  }, ".backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:1000;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.position.__jsx-style-dynamic-selector{position:relative;z-index:1001;outline:none;max-width:90%;width:".concat(width, ";margin:20px auto;vertical-align:middle;display:inline-block;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:").concat(theme.expressiveness.portalOpacity, ";background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}"))));
+}
+
+BackdropComponent.defaultProps = defaultProps;
+BackdropComponent.displayName = 'BolioUIBackdrop';
+var Backdrop = /*#__PURE__*/React.memo(BackdropComponent);
+export default Backdrop;

package/esm/shared/css-transition.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+import React, { useEffect, useState } from 'react';
+var defaultProps = {
+  visible: false,
+  enterTime: 60,
+  leaveTime: 60,
+  clearTime: 60,
+  className: '',
+  name: 'transition'
+};
+
+function CssTransition(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      visible = _ref.visible,
+      enterTime = _ref.enterTime,
+      leaveTime = _ref.leaveTime,
+      clearTime = _ref.clearTime,
+      name = _ref.name,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      classes = _useState2[0],
+      setClasses = _useState2[1];
+
+  var _useState3 = useState(visible),
+      _useState4 = _slicedToArray(_useState3, 2),
+      renderable = _useState4[0],
+      setRenderable = _useState4[1];
+
+  useEffect(function () {
+    var statusClassName = visible ? 'enter' : 'leave';
+    var time = visible ? enterTime : leaveTime;
+
+    if (visible && !renderable) {
+      setRenderable(true);
+    }
+
+    setClasses("".concat(name, "-").concat(statusClassName)); // set class to active
+
+    var timer = setTimeout(function () {
+      setClasses("".concat(name, "-").concat(statusClassName, " ").concat(name, "-").concat(statusClassName, "-active"));
+      clearTimeout(timer);
+    }, time); // remove classess when animation over
+
+    var clearClassesTimer = setTimeout(function () {
+      if (!visible) {
+        setClasses('');
+        setRenderable(false);
+      }
+
+      clearTimeout(clearClassesTimer);
+    }, time + clearTime);
+    return function () {
+      clearTimeout(timer);
+      clearTimeout(clearClassesTimer);
+    };
+  }, [visible, renderable]);
+  if (! /*#__PURE__*/React.isValidElement(children) || !renderable) return null;
+  return /*#__PURE__*/React.cloneElement(children, _extends({}, props, {
+    className: "".concat(children.props.className, " ").concat(className, " ").concat(classes)
+  }));
+}
+
+CssTransition.defaultProps = defaultProps;
+CssTransition.displayName = 'BolioUICssTransition';
+export default CssTransition;

package/esm/shared/dropdown.js

@@ -0,0 +1,109 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import usePortal from '../utils/use-portal';
+import useResize from '../utils/use-resize';
+import CssTransition from './css-transition';
+import useClickAnyWhere from '../utils/use-click-anywhere';
+import useDOMObserver from '../utils/use-dom-observer';
+import useWarning from '../utils/use-warning';
+import { getRefRect } from '../utils/layouts';
+import useClasses from '../use-classes';
+var defaultRect = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  width: 0
+};
+var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+      parent = _ref.parent,
+      visible = _ref.visible,
+      disableMatchWidth = _ref.disableMatchWidth,
+      getPopupContainer = _ref.getPopupContainer;
+  var el = usePortal('dropdown', getPopupContainer);
+
+  var _useState = useState(defaultRect),
+      _useState2 = _slicedToArray(_useState, 2),
+      rect = _useState2[0],
+      setRect = _useState2[1];
+
+  var classes = useClasses('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
+  if (!parent) return null;
+  /* istanbul ignore next */
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (getPopupContainer && getPopupContainer()) {
+      var _el = getPopupContainer();
+
+      var style = window.getComputedStyle(_el);
+
+      if (style.position === 'static') {
+        useWarning('The element specified by "getPopupContainer" must have "position" set.');
+      }
+    }
+  }
+
+  var updateRect = function updateRect() {
+    var _getRefRect = getRefRect(parent, getPopupContainer),
+        top = _getRefRect.top,
+        left = _getRefRect.left,
+        right = _getRefRect.right,
+        nativeWidth = _getRefRect.width;
+
+    setRect({
+      top: top,
+      left: left,
+      right: right,
+      width: nativeWidth
+    });
+  };
+
+  useResize(updateRect);
+  useClickAnyWhere(function () {
+    var _getRefRect2 = getRefRect(parent, getPopupContainer),
+        top = _getRefRect2.top,
+        left = _getRefRect2.left;
+
+    var shouldUpdatePosition = top !== rect.top || left !== rect.left;
+    if (!shouldUpdatePosition) return;
+    updateRect();
+  });
+  useDOMObserver(parent, function () {
+    updateRect();
+  });
+  useEffect(function () {
+    if (!parent || !parent.current) return;
+    parent.current.addEventListener('mouseenter', updateRect);
+    /* istanbul ignore next */
+
+    return function () {
+      if (!parent || !parent.current) return;
+      parent.current.removeEventListener('mouseenter', updateRect);
+    };
+  }, [parent]);
+
+  var clickHandler = function clickHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+  };
+
+  var mouseDownHandler = function mouseDownHandler(event) {
+    event.preventDefault();
+  };
+
+  if (!el) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(CssTransition, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler,
+    className: _JSXStyle.dynamic([["1644673105", [rect.top + 2, rect.left, rect.width, rect.width]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1644673105",
+    dynamic: [rect.top + 2, rect.left, rect.width, rect.width]
+  }, ".dropdown.__jsx-style-dynamic-selector{position:absolute;top:".concat(rect.top + 2, "px;left:").concat(rect.left, "px;z-index:1100;}.width-match.__jsx-style-dynamic-selector{width:").concat(rect.width, "px;}.disable-match.__jsx-style-dynamic-selector{min-width:").concat(rect.width, "px;}")))), el);
+});
+export default Dropdown;

package/esm/shared/ellipsis.js

@@ -0,0 +1,15 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+
+var Ellipsis = function Ellipsis(_ref) {
+  var children = _ref.children,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["822089635", [height]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "822089635",
+    dynamic: [height]
+  }, "span.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:".concat(height, ";min-width:0;}")));
+};
+
+export default /*#__PURE__*/React.memo(Ellipsis);

package/esm/shared/expand.js

@@ -0,0 +1,95 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useRef, useState } from 'react';
+import useRealShape from '../utils/use-real-shape';
+import useClasses from '../use-classes';
+var defaultProps = {
+  isExpanded: false,
+  delay: 200
+};
+
+function Expand(_ref) {
+  var isExpanded = _ref.isExpanded,
+      delay = _ref.delay,
+      children = _ref.children;
+
+  var _useState = useState(isExpanded ? 'auto' : '0'),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var _useState3 = useState(isExpanded),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selfExpanded = _useState4[0],
+      setSelfExpanded = _useState4[1];
+
+  var _useState5 = useState(isExpanded),
+      _useState6 = _slicedToArray(_useState5, 2),
+      visible = _useState6[0],
+      setVisible = _useState6[1];
+
+  var contentRef = useRef(null);
+  var entryTimer = useRef();
+  var leaveTimer = useRef();
+  var resetTimer = useRef();
+
+  var _useRealShape = useRealShape(contentRef),
+      _useRealShape2 = _slicedToArray(_useRealShape, 2),
+      state = _useRealShape2[0],
+      updateShape = _useRealShape2[1];
+
+  var classes = useClasses('container', {
+    expanded: selfExpanded
+  });
+  useEffect(function () {
+    return setHeight("".concat(state.height, "px"));
+  }, [state.height]);
+  useEffect(function () {
+    // show element or reset height.
+    // force an update once manually, even if the element does not change.
+    // (the height of the element might be "auto")
+    if (isExpanded) {
+      setVisible(isExpanded);
+    } else {
+      updateShape();
+      setHeight("".concat(state.height, "px"));
+    } // show expand animation
+
+
+    entryTimer.current = window.setTimeout(function () {
+      setSelfExpanded(isExpanded);
+      clearTimeout(entryTimer.current);
+    }, 30); // Reset height after animation
+
+    if (isExpanded) {
+      resetTimer.current = window.setTimeout(function () {
+        setHeight('auto');
+        clearTimeout(resetTimer.current);
+      }, delay);
+    } else {
+      leaveTimer.current = window.setTimeout(function () {
+        setVisible(isExpanded);
+        clearTimeout(leaveTimer.current);
+      }, delay / 2);
+    }
+
+    return function () {
+      clearTimeout(entryTimer.current);
+      clearTimeout(leaveTimer.current);
+      clearTimeout(resetTimer.current);
+    };
+  }, [isExpanded]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + "content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1918690829",
+    dynamic: [visible ? 'visible' : 'hidden', delay, height]
+  }, ".container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;overflow:hidden;visibility:".concat(visible ? 'visible' : 'hidden', ";-webkit-transition:height ").concat(delay, "ms ease;transition:height ").concat(delay, "ms ease;}.expanded.__jsx-style-dynamic-selector{height:").concat(height, ";visibility:visible;}")));
+}
+
+Expand.defaultProps = defaultProps;
+Expand.displayName = 'BolioUIExpand';
+export default Expand;