@bolio-ui/core 1.1.8 → 2.0.0-alpha.1

package/esm/Collapse/Collapse.js

@@ -2,7 +2,7 @@ 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", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect } from 'react';
 import CollapseIcon from './CollapseIcon';
 import useTheme from '../use-theme';
@@ -12,44 +12,36 @@ import useCurrentState from '../utils/use-current-state';
 import useWarning from '../utils/use-warning';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
-function CollapseComponent(_ref) {
+var CollapseComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      _ref$initialVisible = _ref.initialVisible,
-      initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
-      _ref$shadow = _ref.shadow,
-      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      index = _ref.index,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    _ref$initialVisible = _ref.initialVisible,
+    initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    index = _ref.index,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useCollapseContext = useCollapseContext(),
-      values = _useCollapseContext.values,
-      updateValues = _useCollapseContext.updateValues;
-
+    values = _useCollapseContext.values,
+    updateValues = _useCollapseContext.updateValues;
   var _useCurrentState = useCurrentState(initialVisible),
-      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-      visible = _useCurrentState2[0],
-      setVisible = _useCurrentState2[1],
-      visibleRef = _useCurrentState2[2];
-
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    visible = _useCurrentState2[0],
+    setVisible = _useCurrentState2[1],
+    visibleRef = _useCurrentState2[2];
   var classes = useClasses('collapse', {
     shadow: shadow
   }, className);
-
   if (!title) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useWarning('"title" is required.', 'Collapse');
   }
-
   useEffect(function () {
     if (!values.length) return;
     var isActive = !!values.find(function (item) {
@@ -57,37 +49,44 @@ function CollapseComponent(_ref) {
     });
     setVisible(isActive);
   }, [index, setVisible, values]);
-
   var clickHandler = function clickHandler() {
     var next = !visibleRef.current;
     setVisible(next);
     updateValues && updateValues(index, next);
   };
-
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  var keyDownHandler = function keyDownHandler(event) {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    clickHandler();
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React.createElement("div", {
     role: "button",
+    tabIndex: 0,
+    "aria-expanded": visible,
     onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "view"
+    onKeyDown: keyDownHandler,
+    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "view"
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "title"
+    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "title"
   }, /*#__PURE__*/React.createElement("h3", {
-    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]])
+    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]])
   }, title), " ", /*#__PURE__*/React.createElement(CollapseIcon, {
     active: visible
   })), subtitle && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "subtitle"
+    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "subtitle"
   }, subtitle)), /*#__PURE__*/React.createElement(Expand, {
     isExpanded: visible
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "content"
+    className: _JSXStyle.dynamic([["1468217834", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "content"
   }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1460486588",
-    dynamic: [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]
-  }, ".collapse.__jsx-style-dynamic-selector{border-top:1px solid ".concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.shadow.__jsx-style-dynamic-selector{box-shadow:").concat(theme.expressiveness.shadowSmall, ";border:none;border-radius:").concat(theme.layout.radius, ";padding:").concat(theme.layout.gap, ";}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;}.title.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";}.title.__jsx-style-dynamic-selector h3.__jsx-style-dynamic-selector{margin:0;font-size:1.5em;}.subtitle.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_5, ";margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.6em;padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
-}
-
+    id: "1468217834",
+    dynamic: [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.primary, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]
+  }, ".collapse.__jsx-style-dynamic-selector{border-top:1px solid ".concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.shadow.__jsx-style-dynamic-selector{box-shadow:").concat(theme.expressiveness.shadowSmall, ";border:none;border-radius:").concat(theme.layout.radius, ";padding:").concat(theme.layout.gap, ";}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;}.view.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:4px;}.title.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";}.title.__jsx-style-dynamic-selector h3.__jsx-style-dynamic-selector{margin:0;font-size:1.5em;}.subtitle.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_5, ";margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.6em;padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+});
 CollapseComponent.displayName = 'BolioUICollapse';
 var Collapse = withScale(CollapseComponent);
 export default Collapse;

package/esm/Collapse/CollapseGroup.d.ts

@@ -3,7 +3,9 @@ interface Props {
     accordion?: boolean;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type CollapseGroupProps = Props & NativeAttrs;
-declare const CollapseGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CollapseGroupProps = Props & NativeAttrs;
+declare const CollapseGroup: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs & {
+    children?: React.ReactNode;
+}>;
 export default CollapseGroup;

package/esm/Collapse/CollapseGroup.js

@@ -3,7 +3,7 @@ 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", "accordion", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import Collapse from './Collapse';
 import useCurrentState from '../utils/use-current-state';
@@ -11,46 +11,37 @@ import { setChildrenIndex } from '../utils/collections';
 import { CollapseContext } from './CollapseContext';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function CollapseGroupComponent(_ref) {
   var children = _ref.children,
-      _ref$accordion = _ref.accordion,
-      accordion = _ref$accordion === void 0 ? true : _ref$accordion,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$accordion = _ref.accordion,
+    accordion = _ref$accordion === void 0 ? true : _ref$accordion,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useCurrentState = useCurrentState([]),
-      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-      state = _useCurrentState2[0],
-      setState = _useCurrentState2[1],
-      stateRef = _useCurrentState2[2];
-
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    state = _useCurrentState2[0],
+    setState = _useCurrentState2[1],
+    stateRef = _useCurrentState2[2];
   var classes = useClasses('collapse-group', className);
-
   var updateValues = function updateValues(currentIndex, nextState) {
     var hasChild = stateRef.current.find(function (val) {
       return val === currentIndex;
     });
-
     if (accordion) {
       if (nextState) return setState([currentIndex]);
       return setState([]);
     }
-
     if (nextState) {
       if (hasChild) return;
       return setState([].concat(_toConsumableArray(stateRef.current), [currentIndex]));
     }
-
     setState(stateRef.current.filter(function (item) {
       return item !== currentIndex;
     }));
   };
-
   var initialValue = useMemo(function () {
     return {
       values: state,
@@ -69,7 +60,6 @@ function CollapseGroupComponent(_ref) {
     dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.6), SCALES.pb(0), SCALES.pl(0.6), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, ".collapse-group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.6), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.6), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.collapse-group.__jsx-style-dynamic-selector>div + div{border-top:none;}"))));
 }
-
 CollapseGroupComponent.displayName = 'BolioUICollapseGroup';
 var CollapseGroup = withScale(CollapseGroupComponent);
 export default CollapseGroup;

package/esm/Collapse/CollapseIcon.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 interface Props {
     active?: boolean;
 }
-declare function CollapseIcon({ active }: Props): JSX.Element;
+declare function CollapseIcon({ active }: Props): React.JSX.Element;
 declare const MemoCollapseIcon: React.MemoExoticComponent<typeof CollapseIcon>;
 export default MemoCollapseIcon;

package/esm/Collapse/CollapseIcon.js

@@ -1,6 +1,5 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-
 function CollapseIcon(_ref) {
   var active = _ref.active;
   return /*#__PURE__*/React.createElement("svg", {
@@ -23,6 +22,5 @@ function CollapseIcon(_ref) {
     dynamic: [active ? '-180deg' : '0']
   }, "svg.__jsx-style-dynamic-selector{-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;-webkit-transform:rotateZ(".concat(active ? '-180deg' : '0', ");-ms-transform:rotateZ(").concat(active ? '-180deg' : '0', ");transform:rotateZ(").concat(active ? '-180deg' : '0', ");width:1.5em;height:1.5em;}")));
 }
-
 var MemoCollapseIcon = /*#__PURE__*/React.memo(CollapseIcon);
 export default MemoCollapseIcon;

package/esm/Collapse/index.d.ts

@@ -1,9 +1,9 @@
-import Collapse from "./Collapse";
-import CollapseGroup from "./CollapseGroup";
-export declare type CollapseComponentType = typeof Collapse & {
+import Collapse from './Collapse';
+import CollapseGroup from './CollapseGroup';
+export type CollapseComponentType = typeof Collapse & {
     Group: typeof CollapseGroup;
 };
-export type { CollapseProps } from "./Collapse";
-export type { CollapseGroupProps } from "./CollapseGroup";
+export type { CollapseProps } from './Collapse';
+export type { CollapseGroupProps } from './CollapseGroup';
 declare const _default: CollapseComponentType;
 export default _default;

package/esm/Collapse/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Collapse from './Collapse';
 import CollapseGroup from './CollapseGroup';
 Collapse.Group = CollapseGroup;

package/esm/Combobox/Combobox.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type ComboboxOption = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+};
+interface Props {
+    options: ComboboxOption[];
+    value?: string | null;
+    initialValue?: string | null;
+    onChange?: (value: string | null) => void;
+    onInputChange?: (text: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    emptyText?: string;
+    filter?: (option: ComboboxOption, text: string) => boolean;
+    className?: string;
+}
+type NativeAttrs = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof Props | 'value' | 'defaultValue' | 'onChange' | 'type' | 'role'>;
+export type ComboboxProps = Props & NativeAttrs;
+declare const Combobox: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, Props & NativeAttrs & React.RefAttributes<HTMLInputElement>>;
+export default Combobox;

package/esm/Combobox/Combobox.js

@@ -0,0 +1,199 @@
+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 = ["options", "value", "initialValue", "onChange", "onInputChange", "placeholder", "disabled", "emptyText", "filter", "className", "onKeyDown", "onBlur"];
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useId, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getLabel = function getLabel(option) {
+  var _option$label;
+  return option ? (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.value : '';
+};
+var defaultFilter = function defaultFilter(option, text) {
+  return getLabel(option).toLowerCase().includes(text.trim().toLowerCase());
+};
+var firstEnabled = function firstEnabled(options) {
+  return options.findIndex(function (option) {
+    return !option.disabled;
+  });
+};
+var ComboboxComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var options = _ref.options,
+    customValue = _ref.value,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? null : _ref$initialValue,
+    onChange = _ref.onChange,
+    onInputChange = _ref.onInputChange,
+    placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$emptyText = _ref.emptyText,
+    emptyText = _ref$emptyText === void 0 ? 'No results' : _ref$emptyText,
+    _ref$filter = _ref.filter,
+    filter = _ref$filter === void 0 ? defaultFilter : _ref$filter,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    onKeyDown = _ref.onKeyDown,
+    onBlur = _ref.onBlur,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var baseId = useId();
+  var listId = "".concat(baseId, "-list");
+  var optionId = function optionId(index) {
+    return "".concat(baseId, "-option-").concat(index);
+  };
+  var isControlled = customValue !== undefined;
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfValue = _useState2[0],
+    setSelfValue = _useState2[1];
+  var selected = isControlled ? customValue : selfValue;
+  var selectedOption = options.find(function (option) {
+    return option.value === selected;
+  });
+  var selectedLabel = getLabel(selectedOption);
+  var _useState3 = useState(selectedLabel),
+    _useState4 = _slicedToArray(_useState3, 2),
+    text = _useState4[0],
+    setText = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var _useState7 = useState(-1),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeIndex = _useState8[0],
+    setActiveIndex = _useState8[1];
+  useEffect(function () {
+    setText(selectedLabel);
+  }, [selectedLabel]);
+
+  // Once an option is chosen, show every option again until the user types.
+  var query = selectedOption && text === selectedLabel ? '' : text;
+  var visible = useMemo(function () {
+    return options.filter(function (option) {
+      return filter(option, query);
+    });
+  }, [options, filter, query]);
+  var expanded = open && visible.length > 0;
+  useEffect(function () {
+    setActiveIndex(open ? firstEnabled(visible) : -1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, query]);
+  useEffect(function () {
+    var _element$scrollIntoVi;
+    if (activeIndex < 0) return;
+    var element = document.getElementById(optionId(activeIndex));
+    element === null || element === void 0 ? void 0 : (_element$scrollIntoVi = element.scrollIntoView) === null || _element$scrollIntoVi === void 0 ? void 0 : _element$scrollIntoVi.call(element, {
+      block: 'nearest'
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex]);
+  var choose = function choose(option) {
+    if (option.disabled) return;
+    if (!isControlled) setSelfValue(option.value);
+    setText(getLabel(option));
+    setOpen(false);
+    onChange && onChange(option.value);
+  };
+  var inputHandler = function inputHandler(event) {
+    var next = event.target.value;
+    setText(next);
+    setOpen(true);
+    onInputChange && onInputChange(next);
+    if (next === '' && selected !== null) {
+      if (!isControlled) setSelfValue(null);
+      onChange && onChange(null);
+    }
+  };
+  var move = function move(direction) {
+    var count = visible.length;
+    if (!count) return;
+    var index = activeIndex === -1 ? direction === 1 ? -1 : count : activeIndex;
+    for (var step = 0; step < count; step++) {
+      index = (index + direction + count) % count;
+      if (!visible[index].disabled) return setActiveIndex(index);
+    }
+  };
+  var keyDownHandler = function keyDownHandler(event) {
+    onKeyDown && onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!open) return setOpen(true);
+      return move(event.key === 'ArrowDown' ? 1 : -1);
+    }
+    if (event.key === 'Enter' && expanded && activeIndex >= 0) {
+      event.preventDefault();
+      return choose(visible[activeIndex]);
+    }
+    if (event.key === 'Escape' && open) {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+  var blurHandler = function blurHandler(event) {
+    onBlur && onBlur(event);
+    setOpen(false);
+    setText(selectedLabel);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (useClasses('combobox', className) || "")
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref,
+    type: "text",
+    role: "combobox",
+    autoComplete: "off",
+    "aria-autocomplete": "list",
+    "aria-expanded": expanded,
+    "aria-controls": expanded ? listId : undefined,
+    "aria-activedescendant": expanded && activeIndex >= 0 ? optionId(activeIndex) : undefined,
+    value: text,
+    placeholder: placeholder,
+    disabled: disabled,
+    onChange: inputHandler,
+    onKeyDown: keyDownHandler,
+    onBlur: blurHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (props && props.className != null && props.className || "")
+  })), expanded && /*#__PURE__*/React.createElement("ul", {
+    id: listId,
+    role: "listbox",
+    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]])
+  }, visible.map(function (option, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: option.value,
+      id: optionId(index),
+      role: "option",
+      "aria-selected": option.value === selected,
+      "aria-disabled": option.disabled || undefined,
+      onMouseDown: function onMouseDown(event) {
+        event.preventDefault();
+        choose(option);
+      },
+      onMouseMove: function onMouseMove() {
+        return !option.disabled && setActiveIndex(index);
+      },
+      className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (useClasses({
+        active: index === activeIndex,
+        selected: option.value === selected,
+        disabled: option.disabled
+      }) || "")
+    }, getLabel(option));
+  })), open && visible.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + "empty"
+  }, emptyText), /*#__PURE__*/React.createElement("div", {
+    role: "status",
+    className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + "sr-only"
+  }, expanded ? "".concat(visible.length, " result").concat(visible.length === 1 ? '' : 's', " available") : ''), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1685493807",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]
+  }, ".combobox.__jsx-style-dynamic-selector{position:relative;display:inline-block;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{box-sizing:border-box;width:100%;min-width:12.5em;height:2.5em;padding:0 0.875em;font:inherit;color:").concat(theme.palette.foreground, ";background-color:").concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";outline:none;-webkit-transition:border-color 0.15s ease;transition:border-color 0.15s ease;}input.__jsx-style-dynamic-selector:focus{border-color:").concat(theme.palette.primary, ";}input.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";}ul.__jsx-style-dynamic-selector,.empty.__jsx-style-dynamic-selector{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1100;box-sizing:border-box;background-color:").concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}ul.__jsx-style-dynamic-selector{max-height:15em;overflow-y:auto;margin:0;padding:0.25em;list-style:none;}li.__jsx-style-dynamic-selector{padding:0.5em 0.75em;border-radius:4px;cursor:pointer;color:").concat(theme.palette.foreground, ";}li.active.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}li.selected.__jsx-style-dynamic-selector{font-weight:600;}li.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:").concat(theme.palette.accents_4, ";}.empty.__jsx-style-dynamic-selector{padding:0.75em;color:").concat(theme.palette.accents_5, ";}.sr-only.__jsx-style-dynamic-selector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);white-space:nowrap;border:0;}")));
+});
+ComboboxComponent.displayName = 'BolioUICombobox';
+var Combobox = withScale(ComboboxComponent);
+export default Combobox;

package/esm/Combobox/index.d.ts

@@ -0,0 +1,3 @@
+import Combobox from './Combobox';
+export type { ComboboxProps, ComboboxOption } from './Combobox';
+export default Combobox;

package/esm/Combobox/index.js

@@ -0,0 +1,3 @@
+'use client';
+import Combobox from './Combobox';
+export default Combobox;

package/esm/Container/Container.d.ts

@@ -1,33 +1,17 @@
 import React from 'react';
-declare type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
-declare type Align = 'top' | 'middle' | 'bottom';
+type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+type Align = 'top' | 'middle' | 'bottom';
 interface Props {
     gap?: number;
     justify?: Justify;
     align?: Align;
-    component?: keyof JSX.IntrinsicElements;
+    component?: keyof React.JSX.IntrinsicElements;
     className?: string;
+    fluid?: boolean;
 }
-declare const defaultProps: {
-    gap: number;
-    justify: Justify;
-    align: Align;
-    component: keyof JSX.IntrinsicElements;
-    className: string;
-    fluid: boolean;
-};
-declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export declare type ContainerProps = Props & NativeAttrs;
-declare function Container({ children, component, justify, align, fluid, className, ...props }: React.PropsWithChildren<ContainerProps> & typeof defaultProps): JSX.Element;
-declare namespace Container {
-    var defaultProps: {
-        gap: number;
-        justify: Justify;
-        align: Align;
-        component: keyof JSX.IntrinsicElements;
-        className: string;
-        fluid: boolean;
-    };
-    var displayName: string;
-}
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type ContainerProps = Props & NativeAttrs;
+declare const Container: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default Container;

package/esm/Container/Container.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "component", "justify", "align", "fluid", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 var defaultProps = {
@@ -12,7 +12,6 @@ var defaultProps = {
   className: '',
   fluid: false
 };
-
 var getFlexAlignment = function getFlexAlignment(justify, align) {
   var flexJustifyMap = {
     end: 'flex-end',
@@ -29,34 +28,35 @@ var getFlexAlignment = function getFlexAlignment(justify, align) {
     alignValue: flexAlignMap[align] || 'normal'
   };
 };
-
-function Container(_ref) {
+var Container = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      component = _ref.component,
-      justify = _ref.justify,
-      align = _ref.align,
-      fluid = _ref.fluid,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$component = _ref.component,
+    component = _ref$component === void 0 ? defaultProps.component : _ref$component,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? defaultProps.justify : _ref$justify,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? defaultProps.align : _ref$align,
+    _ref$fluid = _ref.fluid,
+    fluid = _ref$fluid === void 0 ? defaultProps.fluid : _ref$fluid,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? defaultProps.className : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var Component = component;
   var theme = useTheme();
-
   var _useMemo = useMemo(function () {
-    return getFlexAlignment(justify, align);
-  }, [justify, align]),
-      justifyValue = _useMemo.justifyValue,
-      alignValue = _useMemo.alignValue;
-
-  var fluidWidth = !fluid && 'max-width: ' + theme.layout.pageWidthWithMargin;
-  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    className: _JSXStyle.dynamic([["1970593515", [fluidWidth, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "container ".concat(className))
+      return getFlexAlignment(justify, align);
+    }, [justify, align]),
+    justifyValue = _useMemo.justifyValue,
+    alignValue = _useMemo.alignValue;
+  var fluidWidth = fluid ? '' : 'max-width: ' + theme.layout.pageWidthWithMargin;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2507064107", [fluidWidth, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "container ".concat(className))
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1970593515",
+    id: "2507064107",
     dynamic: [fluidWidth, justifyValue, alignValue]
   }, ".container.__jsx-style-dynamic-selector{".concat(fluidWidth, ";padding-left:15px;padding-right:15px;margin-right:auto;margin-left:auto;-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
-}
-
-Container.defaultProps = defaultProps;
+});
 Container.displayName = 'BolioUIContainer';
 export default Container;