@popmenu/common-ui 0.24.0 → 0.25.0

package/build/components/TabPanel/TabPanel.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { TabPanelProps } from './TabPanelProps';
+export declare const TabPanel: (props: PropsWithChildren<TabPanelProps>) => JSX.Element | null;

package/build/components/TabPanel/TabPanelProps.d.ts

@@ -0,0 +1,3 @@
+export interface TabPanelProps {
+    show: boolean;
+}

package/build/components/TabPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { TabPanel } from './TabPanel';
+export { TabPanelProps } from './TabPanelProps';

package/build/components/index.d.ts

@@ -65,6 +65,7 @@ export { default as SplitInput, SplitInputProps } from './SplitInput';
 export { default as Switch, SwitchProps } from './Switch';
 export { default as Tab, TabProps } from './Tab';
 export { default as Tabs, TabsProps } from './Tabs';
+export { TabPanel, TabPanelProps } from './TabPanel';
 export { default as TextField, TextFieldProps } from './TextField';
 export { default as ThemeProvider, ThemeProviderProps } from './ThemeProvider';
 export { default as ToggleButton, ToggleButtonProps } from './ToggleButton';

package/build/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useCollapsibleText } from './useCollapsibleText';
+export { useTabs } from './useTabs';

package/build/hooks/useTabs/index.d.ts

@@ -0,0 +1 @@
+export { useTabs } from './useTabs';

package/build/hooks/useTabs/useTabs.d.ts

@@ -0,0 +1,3 @@
+import { UseTabsOptions } from './useTabsOptions';
+import { UseTabsResult } from './useTabsResult';
+export declare const useTabs: (options: UseTabsOptions) => UseTabsResult;

package/build/hooks/useTabs/useTabsOptions.d.ts

@@ -0,0 +1,3 @@
+export interface UseTabsOptions {
+    initialTab: string;
+}

package/build/hooks/useTabs/useTabsResult.d.ts

@@ -0,0 +1,21 @@
+declare type PreConfiguredTabProps = {
+    id: string;
+    label: string;
+    value: string;
+    'aria-controls': string;
+};
+declare type PreConfiguredPanelProps = {
+    id: string;
+    role: string;
+    show: boolean;
+    'aria-labelledby': string;
+};
+export declare type UseTabResult = [PreConfiguredTabProps, PreConfiguredPanelProps];
+export interface UseTabsResult {
+    TabsProps: {
+        onChange: (event: any, value: string) => void;
+        value: string;
+    };
+    useTab: (baseTabId: string) => UseTabResult;
+}
+export {};

package/build/index.es.js

@@ -89,12 +89,12 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$3M;
+var _path$3N;
 
-function _extends$41() { _extends$41 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$41.apply(this, arguments); }
+function _extends$42() { _extends$42 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$42.apply(this, arguments); }
 
 function SvgMinusCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$41({
+  return /*#__PURE__*/React.createElement("svg", _extends$42({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -102,17 +102,17 @@ function SvgMinusCircle(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$3M || (_path$3M = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3N || (_path$3N = /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334zM5.333 8h5.334"
   })));
 }
 
-var _path$3E;
+var _path$3F;
 
-function _extends$3V() { _extends$3V = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3V.apply(this, arguments); }
+function _extends$3W() { _extends$3W = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3W.apply(this, arguments); }
 
 function SvgPlusCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3V({
+  return /*#__PURE__*/React.createElement("svg", _extends$3W({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -120,17 +120,17 @@ function SvgPlusCircle(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$3E || (_path$3E = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3F || (_path$3F = /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334zm0-9.334v5.334M5.333 8h5.334"
   })));
 }
 
-var _path$3k;
+var _path$3l;
 
-function _extends$3B() { _extends$3B = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3B.apply(this, arguments); }
+function _extends$3C() { _extends$3C = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3C.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3B({
+  return /*#__PURE__*/React.createElement("svg", _extends$3C({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -138,17 +138,17 @@ function SvgUser(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$3k || (_path$3k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3l || (_path$3l = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z"
   })));
 }
 
-var _path$1f;
+var _path$1g;
 
-function _extends$1p() { _extends$1p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1p.apply(this, arguments); }
+function _extends$1q() { _extends$1q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1q.apply(this, arguments); }
 
 function SvgPause(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1p({
+  return /*#__PURE__*/React.createElement("svg", _extends$1q({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -156,17 +156,17 @@ function SvgPause(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
     d: "M6.667 2.667H4v10.666h2.667V2.667zm5.333 0H9.333v10.666H12V2.667z"
   })));
 }
 
-var _path$1d;
+var _path$1e;
 
-function _extends$1n() { _extends$1n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1n.apply(this, arguments); }
+function _extends$1o() { _extends$1o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1o.apply(this, arguments); }
 
 function SvgPlay(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1n({
+  return /*#__PURE__*/React.createElement("svg", _extends$1o({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -174,17 +174,17 @@ function SvgPlay(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
     d: "M3.333 2l9.334 6-9.334 6V2z"
   })));
 }
 
-var _path$10;
+var _path$11;
 
-function _extends$1a() { _extends$1a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
+function _extends$1b() { _extends$1b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1b.apply(this, arguments); }
 
 function SvgVolumeDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1a({
+  return /*#__PURE__*/React.createElement("svg", _extends$1b({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -192,17 +192,17 @@ function SvgVolumeDown(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
     d: "M8.999 3.333L5.665 6H3v4h2.666L9 12.667V3.333zm3.026 2.307a3.333 3.333 0 010 4.713"
   })));
 }
 
-var _path$$;
+var _path$10;
 
-function _extends$19() { _extends$19 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
+function _extends$1a() { _extends$1a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
 
 function SvgVolumeMute(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$19({
+  return /*#__PURE__*/React.createElement("svg", _extends$1a({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -210,17 +210,17 @@ function SvgVolumeMute(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
     d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333z"
   })));
 }
 
-var _path$_;
+var _path$$;
 
-function _extends$18() { _extends$18 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
+function _extends$19() { _extends$19 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
 
 function SvgVolumeOff(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$18({
+  return /*#__PURE__*/React.createElement("svg", _extends$19({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -228,17 +228,17 @@ function SvgVolumeOff(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
     d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm8 2.667l-4 4m0-4l4 4"
   })));
 }
 
-var _path$Z;
+var _path$_;
 
-function _extends$17() { _extends$17 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
+function _extends$18() { _extends$18 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
 
 function SvgVolumeUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$17({
+  return /*#__PURE__*/React.createElement("svg", _extends$18({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -246,7 +246,7 @@ function SvgVolumeUp(props) {
     width: "1em",
     height: "1em",
     fill: "none"
-  }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
     d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm5.38-.046a6.667 6.667 0 010 9.426M10.36 5.64a3.333 3.333 0 010 4.713"
   })));
 }
@@ -966,6 +966,11 @@ var Switch = forwardRef(function (props, ref) {
 });
 Switch.displayName = 'Switch';
 
+var TabPanel = function (props) {
+    var children = props.children, show = props.show;
+    return show ? React__default.createElement(Box, null, children) : null;
+};
+
 var useToggleButtonStyles = makeStyles$1(function (theme) { return ({
     root: {
         color: theme.palette.text.primary,
@@ -1081,5 +1086,35 @@ var useCollapsibleText = function () {
     };
 };
 
-export { AudioPlayer, Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText };
+var useTabs = function (options) {
+    var initialTab = options.initialTab;
+    var genTabId = function (id) { return ("tab-" + id).toLowerCase().replace(/ /g, '-'); };
+    var genPanelId = function (id) { return ("tab-panel-" + id).toLowerCase().replace(/ /g, '-'); };
+    var _a = useState(genTabId(initialTab)), activeTab = _a[0], setActiveTab = _a[1];
+    var handleChange = function (_, nextTab) { return setActiveTab(nextTab); };
+    var TabsProps = { onChange: handleChange, value: activeTab };
+    var useTab = function (baseId) {
+        var tabId = genTabId(baseId);
+        var tabPanelId = genPanelId(baseId);
+        var tabProps = {
+            id: tabId,
+            label: baseId,
+            value: tabId,
+            'aria-controls': tabPanelId,
+        };
+        var panelProps = {
+            id: tabPanelId,
+            role: 'tabpanel',
+            show: activeTab === tabId,
+            'aria-labelledby': tabId,
+        };
+        return [tabProps, panelProps];
+    };
+    return {
+        TabsProps: TabsProps,
+        useTab: useTab,
+    };
+};
+
+export { AudioPlayer, Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, TabPanel, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText, useTabs };
 //# sourceMappingURL=index.es.js.map