@ansible/ansible-ui-framework 0.0.190

package/cjs/framework/components/Grid.js

@@ -0,0 +1,64 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
+var react_1 = require("react");
+var useBreakPoint_1 = require("./useBreakPoint");
+function Grid(props) {
+    var _a;
+    var size = (_a = props.size) !== null && _a !== void 0 ? _a : 350;
+    var target = (0, react_1.useRef)(null);
+    var _b = __read((0, react_1.useState)('1fr'), 2), gridTemplateColumns = _b[0], setGridTemplateColumns = _b[1];
+    var resize = (0, react_1.useCallback)(function (width) {
+        var _a;
+        var columns = Math.min((_a = props.maxColumns) !== null && _a !== void 0 ? _a : 12, Math.max(Math.floor(width / size), 1));
+        if (columns < 1)
+            columns = 1;
+        setGridTemplateColumns(function () { return new Array(columns).fill('1fr').join(' '); });
+    }, [props.maxColumns, size]);
+    (0, resize_observer_1.default)(target, function (entry) { return resize(entry.contentRect.width); });
+    (0, react_1.useLayoutEffect)(function () {
+        var _a, _b;
+        resize((_b = (_a = target.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0);
+    }, [resize]);
+    var isMd = !(0, useBreakPoint_1.useBreakpoint)('lg');
+    var isXS = !(0, useBreakPoint_1.useBreakpoint)('xs');
+    var gap = 24;
+    if (isMd)
+        gap = 16;
+    if (isXS)
+        gap = 8;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: target, style: { display: 'grid', gridAutoRows: '1fr', gridTemplateColumns: gridTemplateColumns, gap: gap } }, { children: props.children })));
+}
+exports.Grid = Grid;

package/cjs/framework/components/Help.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Help = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_icons_1 = require("@patternfly/react-icons");
+function Help(props) {
+    var help = props.help, title = props.title;
+    if (!help)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Popover, __assign({ headerContent: title, bodyContent: help, removeFindDomNode: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "link", style: { padding: 0, marginLeft: '8px', verticalAlign: 'middle' } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedQuestionCircleIcon, {}) })) })));
+}
+exports.Help = Help;

package/cjs/framework/components/IconWrapper.js

@@ -0,0 +1,55 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWrapper = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var patternfly_colors_1 = require("./patternfly-colors");
+function IconWrapper(props) {
+    var newProps = {};
+    if (props.color) {
+        newProps.color = (0, patternfly_colors_1.getPatternflyColor)(props.color);
+    }
+    var marginOffset = undefined;
+    var marginRight = undefined;
+    if (props.size) {
+        newProps.size = props.size;
+        switch (props.size) {
+            case 'sm':
+                marginRight = 6;
+                break;
+            case 'md':
+                marginOffset = -2;
+                marginRight = 6;
+                break;
+            case 'lg':
+                marginOffset = -6;
+                marginRight = 6;
+                break;
+        }
+    }
+    if (props.noPadding) {
+        marginRight = undefined;
+    }
+    var newChildren = react_1.Children.toArray(props.children).map(function (child) {
+        if ((0, react_1.isValidElement)(child)) {
+            var newChild = (0, react_1.cloneElement)(child, newProps);
+            return newChild;
+        }
+        else {
+            return child;
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { marginTop: marginOffset, marginBottom: marginOffset, marginRight: marginRight } }, { children: newChildren })));
+}
+exports.IconWrapper = IconWrapper;

package/cjs/framework/components/LoadingPage.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingPage = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var PageHeader_1 = require("../PageHeader");
+function LoadingPage(props) {
+    var _a;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { breadcrumbs: props.breadcrumbs, title: (_a = props.title) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "200px" })) }), (0, jsx_runtime_1.jsx)(react_core_1.PageSection
+            // variant={theme === ThemeE.Dark ? undefined : 'light'}
+            , {})] }));
+}
+exports.LoadingPage = LoadingPage;

package/cjs/framework/components/Masonry.js

@@ -0,0 +1,113 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Masonry = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
+var react_1 = require("react");
+function Masonry(props) {
+    var target = (0, react_1.useRef)(null);
+    var _a = __read((0, react_1.useState)(1), 2), columns = _a[0], setColumns = _a[1];
+    (0, resize_observer_1.default)(target, function (entry) {
+        var _a;
+        setColumns(Math.min((_a = props.maxColumns) !== null && _a !== void 0 ? _a : 12, Math.max(Math.floor(entry.contentRect.width / props.minSize), 1)));
+    });
+    var _b = __read((0, react_1.useState)(12), 2), span = _b[0], setSpan = _b[1];
+    var _c = __read((0, react_1.useState)({}), 2), sizes = _c[0], setSizes = _c[1];
+    (0, react_1.useLayoutEffect)(function () {
+        switch (columns) {
+            case 1:
+                setSpan(12);
+                break;
+            case 2:
+                setSpan(6);
+                break;
+            case 3:
+                setSpan(4);
+                break;
+            case 4:
+                setSpan(3);
+                break;
+            case 5:
+                setSpan(2);
+                break;
+            case 6:
+                setSpan(2);
+                break;
+            default:
+                setSpan(1);
+                break;
+        }
+    }, [columns]);
+    var realColumns = 12 / span;
+    var itemColumns = (0, react_1.useMemo)(function () {
+        var itemColumns = new Array(realColumns).fill(0).map(function () { return []; });
+        var columnHeights = new Array(realColumns).fill(0);
+        react_1.Children.forEach(props.children, function (child, index) {
+            var smallest = Math.min.apply(Math, __spreadArray([], __read(columnHeights), false));
+            var columnIndex = columnHeights.findIndex(function (column) { return column === smallest; });
+            if (columnIndex !== undefined && columnIndex !== -1) {
+                itemColumns[columnIndex].push((0, jsx_runtime_1.jsx)(MasonryItem, __assign({ index: index, sizes: sizes, setSizes: setSizes }, { children: child }), index));
+                var height = sizes[index];
+                if (height !== undefined) {
+                    columnHeights[columnIndex] += height + 16;
+                }
+            }
+        });
+        return itemColumns;
+    }, [props.children, realColumns, sizes]);
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: target }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Grid, __assign({ hasGutter: true, style: { maxWidth: realColumns * props.minSize } }, { children: itemColumns.map(function (column, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.GridItem, __assign({ span: span }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Stack, __assign({ hasGutter: true }, { children: column })) }), index)); }) })) })));
+}
+exports.Masonry = Masonry;
+function MasonryItem(props) {
+    var target = (0, react_1.useRef)(null);
+    (0, resize_observer_1.default)(target, function (entry) {
+        props.setSizes(function (sizes) {
+            if (props.sizes[props.index] !== entry.contentRect.height) {
+                sizes = __assign({}, sizes);
+                sizes[props.index] = entry.contentRect.height;
+            }
+            return sizes;
+        });
+    });
+    return (0, jsx_runtime_1.jsx)("div", __assign({ ref: target }, { children: props.children }));
+}

package/cjs/framework/components/Scrollable.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scrollable = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
+var react_1 = require("react");
+function Scrollable(props) {
+    var divEl = (0, react_1.useRef)(null);
+    var _a = __read((0, react_1.useState)(0), 2), topShadow = _a[0], setTopShadow = _a[1];
+    var _b = __read((0, react_1.useState)(0), 2), bottomShadow = _b[0], setBottomShadow = _b[1];
+    var update = (0, react_1.useCallback)(function () {
+        /* istanbul ignore else */
+        if (divEl.current) {
+            setTopShadow(Math.min(1, divEl.current.scrollTop / 8));
+            var scrollBottom = divEl.current.scrollHeight - divEl.current.scrollTop - divEl.current.clientHeight - 1;
+            setBottomShadow(Math.max(0, Math.min(1, scrollBottom / 8)));
+        }
+    }, []);
+    (0, react_1.useEffect)(function () { return update(); }, [update, props.children]);
+    (0, resize_observer_1.default)(divEl, function () {
+        update();
+    });
+    var shadowOpacityTop = 0.2 * topShadow;
+    var shadowOpacityBottom = 0.2 * bottomShadow;
+    // const [theme] = useTheme()
+    // if (theme === ThemeE.Dark) {
+    //     shadowOpacityTop *= 6
+    //     shadowOpacityBottom *= 6
+    // }
+    /* istanbul ignore next */
+    var borderTop = props.borderTop ? 'thin solid rgba(0, 0, 0, 0.12)' : '';
+    /* istanbul ignore next */
+    var borderBottom = props.borderBottom ? 'thin solid rgba(0, 0, 0, 0.12)' : '';
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign(__assign({}, props.style), { display: 'flex', flexDirection: 'column', flexGrow: 1, overflowY: 'hidden', position: 'relative' }) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ ref: divEl, style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    overflowY: 'auto',
+                    borderTop: borderTop,
+                    borderBottom: borderBottom,
+                }, onScroll: update }, { children: props.children })), 
+            /* istanbul ignore next */ shadowOpacityTop > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    height: '10px',
+                    width: '100%',
+                    background: "linear-gradient(rgba(0,0,0,".concat(shadowOpacityTop, "), rgba(0,0,0,0))"),
+                } })), 
+            /* istanbul ignore next */ shadowOpacityBottom > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    height: '10px',
+                    width: '100%',
+                    background: "linear-gradient(rgba(0,0,0,0), rgba(0,0,0,".concat(shadowOpacityBottom, "))"),
+                } }))] })));
+}
+exports.Scrollable = Scrollable;

package/cjs/framework/components/SingleSelect.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleSelect2 = exports.SingleSelect = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_1 = require("react");
+var useOpen_1 = require("./useOpen");
+function SingleSelect(props) {
+    var _a;
+    var onChange = props.onChange;
+    var _b = __read((0, useOpen_1.useOpen)(props), 3), open = _b[0], setOpen = _b[1], onToggle = _b[2];
+    var onSelect = (0, react_1.useCallback)(function (_e, v) {
+        if (typeof v === 'string') {
+            onChange(v);
+        }
+        else {
+            onChange(v.toString());
+        }
+        setOpen(false);
+    }, [onChange, setOpen]);
+    var id = (_a = props.id) !== null && _a !== void 0 ? _a : props.label.toLocaleLowerCase().split(' ').join('-');
+    return ((0, jsx_runtime_1.jsx)(react_core_1.FormGroup, __assign({ label: props.label, fieldId: id, style: props.style }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect }, { children: props.children })) })));
+}
+exports.SingleSelect = SingleSelect;
+function SingleSelect2(props) {
+    var onChange = props.onChange;
+    var id = props.id;
+    var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
+    var onToggle = (0, react_1.useCallback)(function () {
+        setOpen(function (open) { return !open; });
+    }, []);
+    var onSelect = (0, react_1.useCallback)(function (_e, v) {
+        if (typeof v === 'string') {
+            onChange(v);
+        }
+        else {
+            onChange(v.toString());
+        }
+        setOpen(false);
+    }, [onChange]);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({ id: id, selections: props.value, isOpen: open, onToggle: onToggle, onSelect: onSelect }, { children: props.children })));
+}
+exports.SingleSelect2 = SingleSelect2;

package/cjs/framework/components/patternfly-colors.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pfDisabled = exports.pfInfo = exports.pfWarning = exports.pfDanger = exports.pfSuccess = exports.getPatternflyColor = exports.PatternFlyColor = void 0;
+var PatternFlyColor;
+(function (PatternFlyColor) {
+    PatternFlyColor["Green"] = "green";
+    PatternFlyColor["Blue"] = "blue";
+    PatternFlyColor["Red"] = "red";
+    PatternFlyColor["Yellow"] = "yellow";
+    PatternFlyColor["Grey"] = "grey";
+})(PatternFlyColor = exports.PatternFlyColor || (exports.PatternFlyColor = {}));
+function getPatternflyColor(color) {
+    switch (color) {
+        case 'green':
+            return exports.pfSuccess;
+        case 'red':
+            return exports.pfDanger;
+        case 'yellow':
+            return exports.pfWarning;
+        case 'blue':
+            return exports.pfInfo;
+        case 'grey':
+            return exports.pfDisabled;
+    }
+    return undefined;
+}
+exports.getPatternflyColor = getPatternflyColor;
+exports.pfSuccess = 'var(--pf-global--success-color--100)';
+exports.pfDanger = 'var(--pf-global--danger-color--100)';
+exports.pfWarning = 'var(--pf-global--warning-color--100)';
+exports.pfInfo = 'var(--pf-global--info-color--100)';
+exports.pfDisabled = 'var(--pf-global--disabled-color--100)';

package/cjs/framework/components/useBreakPoint.js

@@ -0,0 +1,145 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOrientation = exports.useBreakpoint = exports.useWindowSize = void 0;
+var global_breakpoint_2xl_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/global_breakpoint_2xl"));
+var global_breakpoint_lg_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/global_breakpoint_lg"));
+var global_breakpoint_md_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/global_breakpoint_md"));
+var global_breakpoint_sm_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/global_breakpoint_sm"));
+var global_breakpoint_xl_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/global_breakpoint_xl"));
+var global_breakpoint_xs_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/global_breakpoint_xs"));
+var react_1 = require("react");
+var breakpoints = {
+    xs: Number(global_breakpoint_xs_1.default.value.replace('px', '')),
+    sm: Number(global_breakpoint_sm_1.default.value.replace('px', '')),
+    md: Number(global_breakpoint_md_1.default.value.replace('px', '')),
+    lg: Number(global_breakpoint_lg_1.default.value.replace('px', '')),
+    xl: Number(global_breakpoint_xl_1.default.value.replace('px', '')),
+    xxl: Number(global_breakpoint_2xl_1.default.value.replace('px', '')),
+};
+function useWindowSize() {
+    var _a = __read((0, react_1.useState)(function () {
+        if (window.innerWidth <= breakpoints.sm)
+            return 'xs';
+        else if (window.innerWidth <= breakpoints.md)
+            return 'sm';
+        else if (window.innerWidth <= breakpoints.lg)
+            return 'md';
+        else if (window.innerWidth <= breakpoints.xl)
+            return 'lg';
+        else if (window.innerWidth <= breakpoints.xxl)
+            return 'xl';
+        else
+            return 'xxl';
+    }), 2), windowSize = _a[0], setWindowSize = _a[1];
+    var handleResize = (0, react_1.useCallback)(function () {
+        if (window.innerWidth <= breakpoints.sm)
+            setWindowSize('xs');
+        else if (window.innerWidth <= breakpoints.md)
+            setWindowSize('sm');
+        else if (window.innerWidth <= breakpoints.lg)
+            setWindowSize('md');
+        else if (window.innerWidth <= breakpoints.xl)
+            setWindowSize('lg');
+        else if (window.innerWidth <= breakpoints.xxl)
+            setWindowSize('xl');
+        else
+            setWindowSize('xxl');
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var handler = handleResize;
+        window.addEventListener('resize', handler);
+        return function () { return window.removeEventListener('resize', handler); };
+    }, [handleResize]);
+    (0, react_1.useEffect)(function () { return handleResize(); }, [handleResize]);
+    return windowSize;
+}
+exports.useWindowSize = useWindowSize;
+/** Returns true if the window size is equal to or larger than the indicated size. */
+function useBreakpoint(size) {
+    var windowSize = useWindowSize();
+    switch (size) {
+        case 'xs':
+            return true;
+        case 'sm':
+            switch (windowSize) {
+                case 'sm':
+                case 'md':
+                case 'lg':
+                case 'xl':
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+        case 'md':
+            switch (windowSize) {
+                case 'md':
+                case 'lg':
+                case 'xl':
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+        case 'lg':
+            switch (windowSize) {
+                case 'lg':
+                case 'xl':
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+        case 'xl':
+            switch (windowSize) {
+                case 'xl':
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+        case 'xxl':
+            switch (windowSize) {
+                case 'xxl':
+                    return true;
+                default:
+                    return false;
+            }
+    }
+}
+exports.useBreakpoint = useBreakpoint;
+function useOrientation() {
+    var _a = __read((0, react_1.useState)(function () {
+        return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
+    }), 2), orientation = _a[0], setOrientation = _a[1];
+    var handleResize = (0, react_1.useCallback)(function () {
+        setOrientation(window.innerWidth > window.innerHeight ? 'landscape' : 'portrait');
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var handler = handleResize;
+        window.addEventListener('resize', handler);
+        return function () { return window.removeEventListener('resize', handler); };
+    }, [handleResize]);
+    (0, react_1.useEffect)(function () { return handleResize(); }, [handleResize]);
+    return orientation;
+}
+exports.useOrientation = useOrientation;

package/cjs/framework/components/useOpen.js

@@ -0,0 +1,36 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpen = void 0;
+var react_1 = require("react");
+function useOpen(props) {
+    var _a = __read((0, react_1.useState)(function () { var _a; return (_a = props.open) !== null && _a !== void 0 ? _a : false; }), 2), open = _a[0], setOpenState = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (props.open !== undefined) {
+            setOpenState(props.open);
+        }
+    }, [props.open, setOpenState]);
+    var setOpen = (0, react_1.useCallback)(function (open) {
+        props.setOpen ? props.setOpen(open) : setOpenState(open);
+    }, [props]);
+    var onToggle = (0, react_1.useCallback)(function () {
+        setOpen(!open);
+    }, [open, setOpen]);
+    return [open, setOpen, onToggle];
+}
+exports.useOpen = useOpen;