@bolio-ui/core 1.0.4 → 1.0.6

package/esm/Themes/Themes.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import lightTheme from './Presets/Default';
+import darkTheme from './Presets/Dark';
+export var isObject = function isObject(target) {
+  return target && _typeof(target) === 'object';
+};
+export var deepDuplicable = function deepDuplicable(source, target) {
+  if (!isObject(target) || !isObject(source)) return source;
+  var sourceKeys = Object.keys(source);
+  var result = {};
+
+  for (var _i = 0, _sourceKeys = sourceKeys; _i < _sourceKeys.length; _i++) {
+    var key = _sourceKeys[_i];
+    var sourceValue = source[key];
+    var targetValue = target[key];
+
+    if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
+      result[key] = targetValue.concat(sourceValue);
+    } else if (isObject(sourceValue) && isObject(targetValue)) {
+      result[key] = deepDuplicable(sourceValue, _extends({}, targetValue));
+    } else if (targetValue) {
+      result[key] = targetValue;
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+
+  return result;
+};
+
+var getPresets = function getPresets() {
+  return [lightTheme, darkTheme];
+};
+
+var getPresetStaticTheme = function getPresetStaticTheme() {
+  return lightTheme;
+};
+
+var isAvailableThemeType = function isAvailableThemeType(type) {
+  if (!type) return false;
+  var presetThemes = getPresets();
+  var hasType = presetThemes.find(function (theme) {
+    return theme.type === type;
+  });
+  return !hasType;
+};
+
+var isPresetTheme = function isPresetTheme(themeOrType) {
+  if (!themeOrType) return false;
+  var isType = typeof themeOrType === 'string';
+  var type = isType ? themeOrType : themeOrType.type;
+  return !isAvailableThemeType(type);
+};
+
+var hasUserCustomTheme = function hasUserCustomTheme() {
+  var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return !!themes.find(function (item) {
+    return isAvailableThemeType(item.type);
+  });
+};
+
+var create = function create(base, custom) {
+  if (!isAvailableThemeType(custom.type)) {
+    throw new Error('Duplicate or unavailable theme type');
+  }
+
+  return deepDuplicable(base, custom);
+};
+
+var createFromDark = function createFromDark(custom) {
+  return create(darkTheme, custom);
+};
+
+var createFromLight = function createFromLight(custom) {
+  return create(lightTheme, custom);
+};
+
+var Themes = {
+  isPresetTheme: isPresetTheme,
+  isAvailableThemeType: isAvailableThemeType,
+  hasUserCustomTheme: hasUserCustomTheme,
+  getPresets: getPresets,
+  getPresetStaticTheme: getPresetStaticTheme,
+  create: create,
+  createFromDark: createFromDark,
+  createFromLight: createFromLight
+};
+export default Themes;

package/esm/Themes/index.d.ts

@@ -0,0 +1,4 @@
+import Themes from "./Themes";
+export type { BolioUIUserTheme } from "./Themes";
+export type { BolioUIThemes, BolioUIThemesBreakpoints, BreakpointsItem, BolioUIThemesExpressiveness, BolioUIThemesFont, BolioUIThemesLayout, BolioUIThemesPalette } from "./Presets";
+export default Themes;

package/esm/Themes/index.js

@@ -0,0 +1,2 @@
+import Themes from './Themes';
+export default Themes;

package/esm/Toggle/Toggle.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type ToggleTypes = NormalTypes;
+export interface ToggleEventTarget {
+    checked: boolean;
+}
+export interface ToggleEvent {
+    target: ToggleEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: React.ChangeEvent;
+}
+interface Props {
+    checked?: boolean;
+    initialChecked?: boolean;
+    onChange?: (ev: ToggleEvent) => void;
+    disabled?: boolean;
+    type?: ToggleTypes;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>;
+export declare type ToggleProps = Props & NativeAttrs;
+export declare type ToggleSize = {
+    width: string;
+    height: string;
+};
+declare const Toggle: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Toggle;

package/esm/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+import Toggle from "./Toggle";
+export type { ToggleProps, ToggleSize, ToggleEvent, ToggleEventTarget, ToggleTypes } from "./Toggle";
+export default Toggle;

package/esm/Toggle/index.js

@@ -0,0 +1,2 @@
+import Toggle from './Toggle';
+export default Toggle;

package/esm/Toggle/stories.js

@@ -0,0 +1,55 @@
+import Toggle from '.';
+import Grid from '../Grid';
+export default {
+  title: 'Data Entry/Toggle',
+  component: Toggle
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, null)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    initialChecked: true
+  })));
+};
+export var Type = function Type() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "primary",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "secondary",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "success",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "warning",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "error",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "info",
+    scale: 2,
+    initialChecked: true
+  })));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    disabled: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    initialChecked: true,
+    disabled: true
+  })));
+};

package/esm/Toggle/styles.d.ts

@@ -0,0 +1,5 @@
+import { BolioUIThemesPalette } from "../Themes/Presets";
+export declare type SelectColor = {
+    bg: string;
+};
+export declare const getColors: (palette: BolioUIThemesPalette, status?: "success" | "primary" | "secondary" | "error" | "warning" | "info" | "default" | undefined) => SelectColor;

package/esm/Tooltip/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TriggerTypes, Placement, SnippetTypes } from "../utils/prop-types";
+export declare type TooltipOnVisibleChange = (visible: boolean) => void;
+export declare type TooltipTypes = SnippetTypes;
+export declare type TooltipTriggers = TriggerTypes;
+export declare type TooltipPlacement = Placement;
+interface Props {
+    text?: string | React.ReactNode;
+    type?: TooltipTypes;
+    placement?: TooltipPlacement;
+    visible?: boolean;
+    initialVisible?: boolean;
+    hideArrow?: boolean;
+    trigger?: TooltipTriggers;
+    enterDelay?: number;
+    leaveDelay?: number;
+    offset?: number;
+    className?: string;
+    portalClassName?: string;
+    onVisibleChange?: TooltipOnVisibleChange;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type TooltipProps = Props & NativeAttrs;
+declare const Tooltip: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Tooltip;

package/esm/Tooltip/Tooltip.js

@@ -0,0 +1,132 @@
+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", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import TooltipContent from './TooltipContent';
+import useClickAway from '../utils/use-click-away';
+import { withScale } from '../use-scale';
+import { getRect } from './helper';
+import useClasses from '../use-classes';
+
+function TooltipComponent(_ref) {
+  var children = _ref.children,
+      _ref$initialVisible = _ref.initialVisible,
+      initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 12 : _ref$offset,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+      _ref$portalClassName = _ref.portalClassName,
+      portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+      _ref$enterDelay = _ref.enterDelay,
+      enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
+      _ref$leaveDelay = _ref.leaveDelay,
+      leaveDelay = _ref$leaveDelay === void 0 ? 150 : _ref$leaveDelay,
+      _ref$trigger = _ref.trigger,
+      trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$onVisibleChange = _ref.onVisibleChange,
+      onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
+      _ref$hideArrow = _ref.hideArrow,
+      hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
+      customVisible = _ref.visible,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var timer = useRef();
+  var ref = useRef(null);
+
+  var _useState = useState(initialVisible),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var iconOffset = useMemo(function () {
+    if (!(ref !== null && ref !== void 0 && ref.current)) return {
+      x: '0.75em',
+      y: '0.75em'
+    };
+    var rect = getRect(ref);
+    return {
+      x: "".concat(rect.width ? rect.width / 2 : 0, "px"),
+      y: "".concat(rect.height ? rect.height / 2 : 0, "px")
+    };
+  }, [ref === null || ref === void 0 ? void 0 : ref.current]);
+  var contentProps = {
+    type: type,
+    visible: visible,
+    offset: offset,
+    placement: placement,
+    hideArrow: hideArrow,
+    iconOffset: iconOffset,
+    parent: ref,
+    className: portalClassName
+  };
+
+  var changeVisible = function changeVisible(nextState) {
+    var clear = function clear() {
+      clearTimeout(timer.current);
+      timer.current = undefined;
+    };
+
+    var handler = function handler(nextState) {
+      setVisible(nextState);
+      onVisibleChange(nextState);
+      clear();
+    };
+
+    clear();
+
+    if (nextState) {
+      timer.current = window.setTimeout(function () {
+        return handler(true);
+      }, enterDelay);
+      return;
+    }
+
+    var leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay;
+    timer.current = window.setTimeout(function () {
+      return handler(false);
+    }, leaveDelayWithoutClick);
+  };
+
+  var mouseEventHandler = function mouseEventHandler(next) {
+    return trigger === 'hover' && changeVisible(next);
+  };
+
+  var clickEventHandler = function clickEventHandler() {
+    return trigger === 'click' && changeVisible(!visible);
+  };
+
+  useClickAway(ref, function () {
+    return trigger === 'click' && changeVisible(false);
+  });
+  useEffect(function () {
+    if (customVisible === undefined) return;
+    changeVisible(customVisible);
+  }, [customVisible]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    onClick: clickEventHandler,
+    onMouseEnter: function onMouseEnter() {
+      return mouseEventHandler(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return mouseEventHandler(false);
+    }
+  }, props, {
+    className: "jsx-418573366" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
+  }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "418573366"
+  }, ".tooltip.jsx-418573366{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
+}
+
+TooltipComponent.displayName = 'BolioUITooltip';
+var Tooltip = withScale(TooltipComponent);
+export default Tooltip;

package/esm/Tooltip/TooltipContent.d.ts

@@ -0,0 +1,18 @@
+import React, { MutableRefObject } from 'react';
+import { Placement, SnippetTypes } from "../utils/prop-types";
+interface Props {
+    parent?: MutableRefObject<HTMLElement | null> | undefined;
+    placement: Placement;
+    type: SnippetTypes;
+    visible: boolean;
+    hideArrow: boolean;
+    offset: number;
+    className?: string;
+    iconOffset: TooltipIconOffset;
+}
+export declare type TooltipIconOffset = {
+    x: string;
+    y: string;
+};
+declare const TooltipContent: React.FC<React.PropsWithChildren<Props>>;
+export default TooltipContent;

package/esm/Tooltip/TooltipContent.js

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import useTheme from '../use-theme';
+import usePortal from '../utils/use-portal';
+import useResize from '../utils/use-resize';
+import CssTransition from '../Shared/css-transition';
+import useClickAnyWhere from '../utils/use-click-anywhere';
+import { getColors } from './styles';
+import { getPosition, defaultTooltipPosition } from './placement';
+import TooltipIcon from './TooltipIcon';
+import useScale from '../use-scale';
+import { getRect } from './helper';
+import useClasses from '../use-classes';
+
+var TooltipContent = function TooltipContent(_ref) {
+  var children = _ref.children,
+      parent = _ref.parent,
+      visible = _ref.visible,
+      offset = _ref.offset,
+      iconOffset = _ref.iconOffset,
+      placement = _ref.placement,
+      type = _ref.type,
+      className = _ref.className,
+      hideArrow = _ref.hideArrow;
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var el = usePortal('tooltip');
+  var selfRef = useRef(null);
+
+  var _useState = useState(defaultTooltipPosition),
+      _useState2 = _slicedToArray(_useState, 2),
+      rect = _useState2[0],
+      setRect = _useState2[1];
+
+  var colors = useMemo(function () {
+    return getColors(type, theme.palette);
+  }, [type, theme.palette]);
+  var hasShadow = type === 'default';
+  var classes = useClasses('tooltip-content', className);
+  if (!parent) return null;
+
+  var updateRect = function updateRect() {
+    var position = getPosition(placement, getRect(parent), offset);
+    setRect(position);
+  };
+
+  useResize(updateRect);
+  useClickAnyWhere(function () {
+    return updateRect();
+  });
+  useEffect(function () {
+    updateRect();
+  }, [visible]);
+
+  var preventHandler = function preventHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+  };
+
+  if (!el) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(CssTransition, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: selfRef,
+    onClick: preventHandler,
+    className: _JSXStyle.dynamic([["3734161695", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3734161695", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + "inner"
+  }, !hideArrow && /*#__PURE__*/React.createElement(TooltipIcon, {
+    placement: placement,
+    shadow: hasShadow
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3734161695",
+    dynamic: [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]
+  }, ".tooltip-content.__jsx-style-dynamic-selector{--tooltip-icon-offset-x:".concat(iconOffset.x, ";--tooltip-icon-offset-y:").concat(iconOffset.y, ";--tooltip-content-bg:").concat(colors.bgColor, ";box-sizing:border-box;position:absolute;top:").concat(rect.top, ";left:").concat(rect.left, ";-webkit-transform:").concat(rect.transform, ";-ms-transform:").concat(rect.transform, ";transform:").concat(rect.transform, ";background-color:var(--tooltip-content-bg);color:").concat(colors.color, ";border-radius:").concat(theme.layout.radius, ";padding:0;z-index:1000;box-shadow:").concat(hasShadow ? theme.expressiveness.shadowMedium : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";}.inner.__jsx-style-dynamic-selector{box-sizing:border-box;position:relative;font-size:").concat(SCALES.font(1), ";padding:").concat(SCALES.pt(0.65), " ").concat(SCALES.pr(0.9), " ").concat(SCALES.pb(0.65), " ").concat(SCALES.pl(0.9), ";height:100%;}")))), el);
+};
+
+export default TooltipContent;

package/esm/Tooltip/TooltipIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Placement } from "../utils/prop-types";
+interface Props {
+    placement: Placement;
+    shadow: boolean;
+}
+declare const TooltipIcon: React.FC<Props>;
+export default TooltipIcon;

package/esm/Tooltip/helper.d.ts

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+export interface ReactiveDomReact {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+}
+export declare const getRect: (ref: MutableRefObject<HTMLElement | null>) => ReactiveDomReact;

package/esm/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import Tooltip from "./Tooltip";
+export type { TooltipProps, TooltipOnVisibleChange, TooltipTypes, TooltipTriggers, TooltipPlacement } from "./Tooltip";
+export default Tooltip;

package/esm/Tooltip/index.js

@@ -0,0 +1,2 @@
+import Tooltip from './Tooltip';
+export default Tooltip;

package/esm/Tooltip/placement.d.ts

@@ -0,0 +1,29 @@
+import { Placement } from "../utils/prop-types";
+interface ParentDomRect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface TooltipPosition {
+    top: string;
+    left: string;
+    transform: string;
+}
+export declare const defaultTooltipPosition: {
+    top: string;
+    left: string;
+    transform: string;
+};
+export interface TooltipIconPosition {
+    top: string;
+    left: string;
+    right: string;
+    bottom: string;
+    transform: string;
+}
+export declare const getPosition: (placement: Placement, rect: ParentDomRect, offset: number) => TooltipPosition;
+export declare const getIconPosition: (placement: Placement, offsetX: string, offsetY: string, offsetAbsolute?: string) => TooltipIconPosition;
+export {};