@bolio-ui/core 2.0.0-alpha.1 → 3.0.0-alpha.0

package/esm/Select/Select.js

@@ -1,223 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange", "aria-label", "aria-labelledby"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import useTheme from '../use-theme';
-import useCurrentState from '../utils/use-current-state';
-import { pickChildByProps } from '../utils/collections';
-import SelectIcon from './SelectIcon';
-import SelectDropdown from './SelectDropdown';
-import SelectMultipleValue from './SelectMultipleValue';
-import Grid from '../Grid';
-import { SelectContext } from './SelectContext';
-import { getColors } from './styles';
-import Ellipsis from '../Shared/ellipsis';
-import SelectInput from './SelectInput';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var defaultProps = {
-  disabled: false,
-  type: 'default',
-  icon: SelectIcon,
-  pure: false,
-  multiple: false,
-  clearable: true,
-  className: '',
-  disableMatchWidth: false,
-  onDropdownVisibleChange: function onDropdownVisibleChange() {}
-};
-var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
-  var children = _ref.children,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    init = _ref.initialValue,
-    customValue = _ref.value,
-    _ref$icon = _ref.icon,
-    Icon = _ref$icon === void 0 ? SelectIcon : _ref$icon,
-    onChange = _ref.onChange,
-    _ref$pure = _ref.pure,
-    pure = _ref$pure === void 0 ? false : _ref$pure,
-    _ref$multiple = _ref.multiple,
-    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-    _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
-    placeholder = _ref.placeholder,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    dropdownClassName = _ref.dropdownClassName,
-    dropdownStyle = _ref.dropdownStyle,
-    _ref$disableMatchWidt = _ref.disableMatchWidth,
-    disableMatchWidth = _ref$disableMatchWidt === void 0 ? false : _ref$disableMatchWidt,
-    getPopupContainer = _ref.getPopupContainer,
-    _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
-    onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
-    ariaLabel = _ref['aria-label'],
-    ariaLabelledby = _ref['aria-labelledby'],
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var ref = useRef(null);
-  var inputRef = useRef(null);
-  var dropdownRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectFocus = _useState4[0],
-    setSelectFocus = _useState4[1];
-  var _useCurrentState = useCurrentState(function () {
-      if (!multiple) return init;
-      if (Array.isArray(init)) return init;
-      return typeof init === 'undefined' ? [] : [init];
-    }),
-    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-    value = _useCurrentState2[0],
-    setValue = _useCurrentState2[1],
-    valueRef = _useCurrentState2[2];
-  var isEmpty = useMemo(function () {
-    if (!Array.isArray(value)) return !value;
-    return value.length === 0;
-  }, [value]);
-  var colors = useMemo(function () {
-    return getColors(theme.palette, type, disabled);
-  }, [theme.palette, type, disabled]);
-  var updateVisible = function updateVisible(next) {
-    onDropdownVisibleChange(next);
-    setVisible(next);
-  };
-  var updateValue = function updateValue(next) {
-    setValue(function (last) {
-      if (!Array.isArray(last)) return next;
-      if (!last.includes(next)) return [].concat(_toConsumableArray(last), [next]);
-      return last.filter(function (item) {
-        return item !== next;
-      });
-    });
-    onChange && onChange(valueRef.current);
-    if (!multiple) {
-      updateVisible(false);
-    }
-  };
-  var initialValue = useMemo(function () {
-    return {
-      value: value,
-      visible: visible,
-      updateValue: updateValue,
-      updateVisible: updateVisible,
-      ref: ref,
-      disableAll: disabled
-    };
-  }, [visible, disabled, ref, value, multiple]);
-  var clickHandler = function clickHandler(event) {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    event.preventDefault();
-    if (disabled) return;
-    updateVisible(!visible);
-    event.preventDefault();
-  };
-  var mouseDownHandler = function mouseDownHandler(event) {
-    /* istanbul ignore next */
-    if (visible) {
-      event.preventDefault();
-    }
-  };
-  useEffect(function () {
-    if (customValue === undefined) return;
-    setValue(customValue);
-  }, [customValue]);
-  useImperativeHandle(selectRef, function () {
-    return {
-      focus: function focus() {
-        var _inputRef$current;
-        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-      },
-      blur: function blur() {
-        var _inputRef$current2;
-        return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
-      },
-      scrollTo: function scrollTo(options) {
-        var _dropdownRef$current;
-        return (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.scrollTo(options);
-      }
-    };
-  }, [inputRef, dropdownRef]);
-  var selectedChild = useMemo(function () {
-    var _pickChildByProps = pickChildByProps(children, 'value', value),
-      _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
-      optionChildren = _pickChildByProps2[1];
-    return React.Children.map(optionChildren, function (child) {
-      if (! /*#__PURE__*/React.isValidElement(child)) return null;
-      var el = /*#__PURE__*/React.cloneElement(child, {
-        preventAllEvents: true
-      });
-      if (!multiple) return el;
-      return /*#__PURE__*/React.createElement(SelectMultipleValue, {
-        disabled: disabled,
-        onClear: clearable ? function () {
-          return updateValue(child.props.value);
-        } : null
-      }, el);
-    });
-  }, [value, children, multiple]);
-  var onInputBlur = function onInputBlur() {
-    updateVisible(false);
-    setSelectFocus(false);
-  };
-  var classes = useClasses('select', {
-    active: selectFocus || visible,
-    multiple: multiple
-  }, className);
-  return /*#__PURE__*/React.createElement(SelectContext.Provider, {
-    value: initialValue
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    onClick: clickHandler,
-    onMouseDown: mouseDownHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement(SelectInput, {
-    ref: inputRef,
-    ariaLabel: ariaLabel || (typeof placeholder === 'string' ? placeholder : undefined),
-    ariaLabelledby: ariaLabelledby,
-    visible: visible,
-    onBlur: onInputBlur,
-    onFocus: function onFocus() {
-      return setSelectFocus(true);
-    }
-  }), isEmpty && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]]) + " " + "value placeholder"
-  }, /*#__PURE__*/React.createElement(Ellipsis, {
-    height: "var(--select-height)"
-  }, placeholder)), value && !multiple && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]]) + " " + "value"
-  }, selectedChild), value && multiple && /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 0.5
-  }, selectedChild), /*#__PURE__*/React.createElement(SelectDropdown, {
-    ref: dropdownRef,
-    visible: visible,
-    className: dropdownClassName,
-    dropdownStyle: dropdownStyle,
-    disableMatchWidth: disableMatchWidth,
-    getPopupContainer: getPopupContainer
-  }, children), !pure && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]]) + " " + "icon"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: _JSXStyle.dynamic([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "12953029",
-    dynamic: [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]
-  }, ".select.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";max-width:90vw;overflow:hidden;-webkit-transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;border:1px solid ").concat(colors.borderColor, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(colors.bgColor, ";--select-font-size:").concat(SCALES.font(0.875), ";--select-height:").concat(SCALES.height(2.25), ";min-width:11.5em;width:").concat(SCALES.width(1, 'initial'), ";height:var(--select-height);padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:var(--select-height);padding:").concat(SCALES.pt(0.334), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0.334), " ").concat(SCALES.pl(0.667), ";}.select.active.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.select.active.icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:").concat(colors.color, ";}.value.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0;margin-right:1.25em;font-size:var(--select-font-size);color:").concat(colors.color, ";width:calc(100% - 1.25em);}.value.__jsx-style-dynamic-selector>div,.value.__jsx-style-dynamic-selector>div:hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}.placeholder.__jsx-style-dynamic-selector{color:").concat(colors.color, ";font-size:").concat(SCALES.font(0.775), ";}.icon.__jsx-style-dynamic-selector{position:absolute;right:").concat(theme.layout.gapQuarter, ";font-size:var(--select-font-size);top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);-ms-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);pointer-events:none;-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(colors.color, ";}"))));
-});
-SelectComponent.defaultProps = defaultProps;
-SelectComponent.displayName = 'BolioUISelect';
-var Select = withScale(SelectComponent);
-export default Select;

package/esm/Select/SelectContext.js

@@ -1,9 +0,0 @@
-import React from 'react';
-var defaultContext = {
-  visible: false,
-  disableAll: false
-};
-export var SelectContext = /*#__PURE__*/React.createContext(defaultContext);
-export var useSelectContext = function useSelectContext() {
-  return React.useContext(SelectContext);
-};

package/esm/Select/SelectDropdown.js

@@ -1,39 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React, { useImperativeHandle, useRef } from 'react';
-import useTheme from '../use-theme';
-import { useSelectContext } from './SelectContext';
-import Dropdown from '../Shared/dropdown';
-import useClasses from '../use-classes';
-var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef) {
-  var visible = _ref.visible,
-    children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$dropdownStyle = _ref.dropdownStyle,
-    dropdownStyle = _ref$dropdownStyle === void 0 ? {} : _ref$dropdownStyle,
-    disableMatchWidth = _ref.disableMatchWidth,
-    getPopupContainer = _ref.getPopupContainer;
-  var theme = useTheme();
-  var internalDropdownRef = useRef(null);
-  var _useSelectContext = useSelectContext(),
-    ref = _useSelectContext.ref;
-  var classes = useClasses('select-dropdown', className);
-  useImperativeHandle(dropdownRef, function () {
-    return internalDropdownRef.current;
-  });
-  return /*#__PURE__*/React.createElement(Dropdown, {
-    parent: ref,
-    visible: visible,
-    disableMatchWidth: disableMatchWidth,
-    getPopupContainer: getPopupContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: internalDropdownRef,
-    style: dropdownStyle,
-    className: _JSXStyle.dynamic([["2113247935", [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.accents_2]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2113247935",
-    dynamic: [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.accents_2]
-  }, ".select-dropdown.__jsx-style-dynamic-selector{border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";background-color:").concat(theme.palette.accents_2, ";max-height:17em;overflow-y:auto;overflow-anchor:none;padding:0.38em 0;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}"))));
-});
-SelectDropdown.displayName = 'BolioUISelectDropdown';
-export default SelectDropdown;

package/esm/Select/SelectIcon.js

@@ -1,21 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-function SelectIconComponent() {
-  return /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    className: "jsx-2742933678"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6 9l6 6 6-6",
-    className: "jsx-2742933678"
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2742933678"
-  }, "svg.jsx-2742933678{color:inherit;stroke:currentColor;-webkit-transition:all 200ms ease;transition:all 200ms ease;width:1.214em;height:1.214em;}"));
-}
-SelectIconComponent.displayName = 'BolioUISelectIcon';
-var SelectIcon = /*#__PURE__*/React.memo(SelectIconComponent);
-export default SelectIcon;

package/esm/Select/SelectIconClear.js

@@ -1,37 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useTheme from '../use-theme';
-function SelectIconClear(_ref) {
-  var onClick = _ref.onClick;
-  var theme = useTheme();
-  var clickHandler = function clickHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    onClick && onClick(event);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]]) + " " + "clear-icon"
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    shapeRendering: "geometricPrecision",
-    className: _JSXStyle.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]])
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M18 6L6 18",
-    className: _JSXStyle.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]])
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M6 6l12 12",
-    className: _JSXStyle.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]])
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3218630561",
-    dynamic: [theme.palette.accents_5, theme.palette.foreground]
-  }, ".clear-icon.__jsx-style-dynamic-selector{padding:0 0 0 0.5em;margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;cursor:pointer;box-sizing:border-box;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;color:".concat(theme.palette.accents_5, ";visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:1em;height:1em;}")));
-}
-var MemoSelectIconClear = /*#__PURE__*/React.memo(SelectIconClear);
-export default MemoSelectIconClear;

package/esm/Select/SelectInput.js

@@ -1,37 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useImperativeHandle, useRef } from 'react';
-var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
-  var visible = _ref.visible,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus,
-    ariaLabel = _ref.ariaLabel,
-    ariaLabelledby = _ref.ariaLabelledby;
-  var ref = useRef(null);
-  useImperativeHandle(inputRef, function () {
-    return ref.current;
-  });
-  useEffect(function () {
-    if (visible) {
-      var _ref$current;
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-    }
-  }, [visible]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
-    ref: ref,
-    type: "search",
-    role: "combobox",
-    "aria-haspopup": "listbox",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    readOnly: true,
-    unselectable: "on",
-    "aria-expanded": visible,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    className: "jsx-2813108835"
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2813108835"
-  }, "input.jsx-2813108835{position:fixed;top:-10000px;left:-10000px;opacity:0;z-index:-1;width:0;height:0;padding:0;font-size:0;border:none;}"));
-});
-SelectInput.displayName = 'BolioUISelectInput';
-export default SelectInput;

package/esm/Select/SelectMultipleValue.js

@@ -1,21 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-import useTheme from '../use-theme';
-import Grid from '../Grid';
-import SelectClearIcon from './SelectIconClear';
-function SelectMultipleValue(_ref) {
-  var disabled = _ref.disabled,
-    onClear = _ref.onClear,
-    children = _ref.children;
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["81854150", [theme.layout.radius, theme.palette.accents_3, disabled ? theme.palette.accents_5 : theme.palette.accents_7]]]) + " " + "item"
-  }, children, !!onClear && /*#__PURE__*/React.createElement(SelectClearIcon, {
-    onClick: onClear
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "81854150",
-    dynamic: [theme.layout.radius, theme.palette.accents_3, disabled ? theme.palette.accents_5 : theme.palette.accents_7]
-  }, ".item.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0 0.5em;font-size:var(--select-font-size);height:calc(var(--select-font-size) * 2);border-radius:".concat(theme.layout.radius, ";background-color:").concat(theme.palette.accents_3, ";color:").concat(disabled ? theme.palette.accents_5 : theme.palette.accents_7, ";}.item.__jsx-style-dynamic-selector>div:not(.clear-icon),.item.__jsx-style-dynamic-selector>div:not(.clear-icon):hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}")));
-}
-SelectMultipleValue.displayName = 'BolioUISelectMultipleValue';
-export default SelectMultipleValue;

package/esm/Select/SelectOption.js

@@ -1,88 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
-import { useSelectContext } from './SelectContext';
-import useWarning from '../utils/use-warning';
-import Ellipsis from '../Shared/ellipsis';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-function SelectOptionComponent(_ref) {
-  var _ref$value = _ref.value,
-    identValue = _ref$value === void 0 ? '' : _ref$value,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$divider = _ref.divider,
-    divider = _ref$divider === void 0 ? false : _ref$divider,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? false : _ref$label,
-    _ref$preventAllEvents = _ref.preventAllEvents,
-    preventAllEvents = _ref$preventAllEvents === void 0 ? false : _ref$preventAllEvents,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useSelectContext = useSelectContext(),
-    updateValue = _useSelectContext.updateValue,
-    value = _useSelectContext.value,
-    disableAll = _useSelectContext.disableAll;
-  var isDisabled = useMemo(function () {
-    return disabled || disableAll;
-  }, [disabled, disableAll]);
-  var isLabel = useMemo(function () {
-    return label || divider;
-  }, [label, divider]);
-  var classes = useClasses('option', {
-    divider: divider,
-    label: label
-  }, className);
-  if (!isLabel && identValue === undefined) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useWarning('The props "value" is required.', 'Select Option');
-  }
-  var selected = useMemo(function () {
-    if (!value) return false;
-    if (typeof value === 'string') {
-      return identValue === value;
-    }
-    return value.includes("".concat(identValue));
-  }, [identValue, value]);
-  var bgColor = useMemo(function () {
-    if (isDisabled) return theme.palette.accents_3;
-    return selected ? theme.palette.accents_3 : theme.palette.accents_2;
-  }, [selected, isDisabled, theme.palette]);
-  var hoverBgColor = useMemo(function () {
-    if (isDisabled || isLabel || selected) return bgColor;
-    return theme.palette.accents_1;
-  }, [selected, isDisabled, theme.palette, isLabel, bgColor]);
-  var color = useMemo(function () {
-    if (isDisabled) return theme.palette.accents_4;
-    return selected ? theme.palette.foreground : theme.palette.accents_5;
-  }, [selected, isDisabled, theme.palette]);
-  var clickHandler = function clickHandler(event) {
-    if (preventAllEvents) return;
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    event.preventDefault();
-    if (isDisabled || isLabel) return;
-    updateValue && updateValue(identValue);
-  };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    onClick: clickHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["345093284", [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.accents_3, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.accents_3, SCALES.font(0.875), SCALES.width(1, '100%')]]]) + " " + (props && props.className != null && props.className || classes || "")
-  }), /*#__PURE__*/React.createElement(Ellipsis, {
-    height: SCALES.height(2.25)
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "345093284",
-    dynamic: [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.accents_3, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.accents_3, SCALES.font(0.875), SCALES.width(1, '100%')]
-  }, ".option.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;background-color:".concat(bgColor, ";color:").concat(color, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;--select-font-size:").concat(SCALES.font(0.75), ";font-size:var(--select-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(2.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.667), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.option.__jsx-style-dynamic-selector:hover{background-color:").concat(hoverBgColor, ";color:").concat(theme.palette.accents_7, ";}.divider.__jsx-style-dynamic-selector{line-height:0;overflow:hidden;border-top:1px solid ").concat(theme.palette.accents_3, ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.label.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_7, ";border-bottom:1px solid ").concat(theme.palette.accents_3, ";text-transform:capitalize;cursor:default;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";font-weight:500;}")));
-}
-SelectOptionComponent.displayName = 'BolioUISelectOption';
-var SelectOption = withScale(SelectOptionComponent);
-export default SelectOption;

package/esm/Select/styles.d.ts

@@ -1,10 +0,0 @@
-import { NormalTypes } from '../utils/prop-types';
-import { BolioUIThemesPalette } from '../Themes/Presets';
-export type SelectColor = {
-    color: string;
-    bgColor: string;
-    borderColor: string;
-    hoverBgColor: string;
-    hoverBorder: string;
-};
-export declare const getColors: (palette: BolioUIThemesPalette, status?: NormalTypes, disabled?: boolean) => SelectColor;

package/esm/Select/styles.js

@@ -1,62 +0,0 @@
-export var getColors = function getColors(palette, status, disabled) {
-  var colors = {
-    "default": {
-      color: palette.foreground,
-      bgColor: palette.accents_1,
-      borderColor: palette.accents_2,
-      hoverBgColor: palette.accents_1,
-      hoverBorder: palette.accents_4
-    },
-    primary: {
-      color: palette.primaryDark,
-      bgColor: palette.primaryLight,
-      borderColor: palette.primary,
-      hoverBgColor: palette.primaryLight,
-      hoverBorder: palette.primary
-    },
-    secondary: {
-      color: palette.secondaryDark,
-      bgColor: palette.secondaryLight,
-      borderColor: palette.secondary,
-      hoverBgColor: palette.secondaryLight,
-      hoverBorder: palette.secondary
-    },
-    success: {
-      color: palette.successDark,
-      bgColor: palette.successLight,
-      borderColor: palette.success,
-      hoverBgColor: palette.successLight,
-      hoverBorder: palette.success
-    },
-    warning: {
-      color: palette.warningDark,
-      bgColor: palette.warningLight,
-      borderColor: palette.warning,
-      hoverBgColor: palette.warningLight,
-      hoverBorder: palette.warning
-    },
-    error: {
-      color: palette.errorDark,
-      bgColor: palette.errorLight,
-      borderColor: palette.error,
-      hoverBgColor: palette.errorLight,
-      hoverBorder: palette.error
-    },
-    info: {
-      color: palette.infoDark,
-      bgColor: palette.infoLight,
-      borderColor: palette.info,
-      hoverBgColor: palette.infoLight,
-      hoverBorder: palette.info
-    }
-  };
-  if (disabled) return {
-    color: palette.accents_6,
-    bgColor: palette.accents_2,
-    borderColor: palette.accents_3,
-    hoverBgColor: palette.accents_2,
-    hoverBorder: palette.accents_3
-  };
-  if (!status) return colors["default"];
-  return colors[status];
-};

package/esm/Shared/backdrop.js

@@ -1,70 +0,0 @@
-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/style";
-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;