@popmenu/common-ui 0.127.0 → 0.128.0

package/build/esm/components/Typography/TypographyStyles.js

@@ -1,27 +1,27 @@
 import { makeStyles } from '@material-ui/core';
 import { iconStaticClassName } from '../Icon/Icon.js';
 
-var weights = {
+const weights = {
     regular: 400,
     medium: 500,
     'semi-bold': 600,
     bold: 700,
 };
-var getCustomColor = function (theme, color) {
-    var isCommonColor = color && ['white', 'black'].includes(color);
-    var isGreyColor = color && color.match(/^grey\.\d{3}/);
-    var isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/);
-    var isTextColor = color && ['textPrimary', 'textSecondary'].includes(color);
+const getCustomColor = (theme, color) => {
+    const isCommonColor = color && ['white', 'black'].includes(color);
+    const isGreyColor = color && color.match(/^grey\.\d{3}/);
+    const isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/);
+    const isTextColor = color && ['textPrimary', 'textSecondary'].includes(color);
     switch (true) {
         case isCommonColor:
             // @ts-expect-error - todo.
             return theme.palette.common[color];
         case Boolean(isGreyColor):
-            var scale = color.split('.')[1];
+            const scale = color.split('.')[1];
             // @ts-expect-error - todo.
             return theme.palette.grey[scale] || theme.palette.grey[900];
         case Boolean(isSemanticColor):
-            var _a = color.split('.'), paletteKey = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
+            const [paletteKey, variant = 'main'] = color.split('.');
             // @ts-expect-error - todo.
             return theme.palette[paletteKey][variant];
         case isTextColor:
@@ -31,46 +31,28 @@ var getCustomColor = function (theme, color) {
             return undefined;
     }
 };
-var useTypographyStyles = makeStyles(function (theme) {
-    var _a;
-    return ({
-        root: (_a = {},
-            _a["& ." + iconStaticClassName] = {
-                position: 'relative',
-                top: '0.125em',
-                padding: '0 0.125em',
-                boxSizing: 'content-box',
-            },
-            _a.fontFamily = theme.typography.fontFamily,
-            _a.fontWeight = function (_a) {
-                var variant = _a.variant, weight = _a.weight;
-                return (weight ? weights[weight] : theme.typography[variant].fontWeight);
-            },
-            _a.fontSize = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].fontSize;
-            },
-            _a.lineHeight = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].lineHeight;
-            },
-            _a.textTransform = function (_a) {
-                var variant = _a.variant;
-                return theme.typography[variant].textTransform;
-            },
-            _a.color = function (_a) {
-                var color = _a.color, variant = _a.variant;
-                return (color && getCustomColor(theme, color)) || theme.typography[variant].color;
-            },
-            _a),
-        caption: {
-            display: 'inline',
+const useTypographyStyles = makeStyles((theme) => ({
+    root: {
+        [`& .${iconStaticClassName}`]: {
+            position: 'relative',
+            top: '0.125em',
+            padding: '0 0.125em',
+            boxSizing: 'content-box',
         },
-        overline: {
-            display: 'inline',
-        },
-    });
-});
+        fontFamily: theme.typography.fontFamily,
+        fontWeight: ({ variant, weight }) => (weight ? weights[weight] : theme.typography[variant].fontWeight),
+        fontSize: ({ variant }) => theme.typography[variant].fontSize,
+        lineHeight: ({ variant }) => theme.typography[variant].lineHeight,
+        textTransform: ({ variant }) => theme.typography[variant].textTransform,
+        color: ({ color, variant }) => (color && getCustomColor(theme, color)) || theme.typography[variant].color,
+    },
+    caption: {
+        display: 'inline',
+    },
+    overline: {
+        display: 'inline',
+    },
+}));
 
 export { useTypographyStyles };
 //# sourceMappingURL=TypographyStyles.js.map

package/build/esm/components/Typography/TypographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypographyStyles.js","sources":["../../../../src/components/Typography/TypographyStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nimport { iconStaticClassName } from '../Icon'\nimport { TypographyProps } from './TypographyProps'\n\nconst weights = {\n  regular: 400,\n  medium: 500,\n  'semi-bold': 600,\n  bold: 700,\n}\n\nconst getCustomColor = (theme: Theme, color: string) => {\n  const isCommonColor = color && ['white', 'black'].includes(color)\n  const isGreyColor = color && color.match(/^grey\\.\\d{3}/)\n  const isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/)\n  const isTextColor = color && ['textPrimary', 'textSecondary'].includes(color)\n  switch (true) {\n    case isCommonColor:\n      // @ts-expect-error - todo.\n      return theme.palette.common[color]\n    case Boolean(isGreyColor):\n      const scale = color.split('.')[1]\n      // @ts-expect-error - todo.\n      return theme.palette.grey[scale] || theme.palette.grey[900]\n    case Boolean(isSemanticColor):\n      const [paletteKey, variant = 'main'] = color.split('.')\n      // @ts-expect-error - todo.\n      return theme.palette[paletteKey][variant]\n    case isTextColor:\n      // @ts-expect-error - todo.\n      return theme.palette.text[color.slice(4).toLowerCase()]\n    default:\n      return undefined\n  }\n}\n\ntype StyleProps = Pick<TypographyProps, 'color' | 'weight'> & {\n  variant: NonNullable<TypographyProps['variant']>\n}\n\nexport const useTypographyStyles = makeStyles<Theme, StyleProps>((theme) => ({\n  root: {\n    [`& .${iconStaticClassName}`]: {\n      position: 'relative',\n      top: '0.125em',\n      padding: '0 0.125em',\n      boxSizing: 'content-box',\n    },\n    fontFamily: theme.typography.fontFamily,\n    fontWeight: ({ variant, weight }) => (weight ? weights[weight] : theme.typography[variant].fontWeight),\n    fontSize: ({ variant }) => theme.typography[variant].fontSize,\n    lineHeight: ({ variant }) => theme.typography[variant].lineHeight,\n    textTransform: ({ variant }) => theme.typography[variant].textTransform,\n    color: ({ color, variant }) => (color && getCustomColor(theme, color)) || theme.typography[variant].color,\n  },\n  caption: {\n    display: 'inline',\n  },\n  overline: {\n    display: 'inline',\n  },\n}))\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TypographyStyles.js","sources":["../../../../src/components/Typography/TypographyStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nimport { iconStaticClassName } from '../Icon'\nimport { TypographyProps } from './TypographyProps'\n\nconst weights = {\n  regular: 400,\n  medium: 500,\n  'semi-bold': 600,\n  bold: 700,\n}\n\nconst getCustomColor = (theme: Theme, color: string) => {\n  const isCommonColor = color && ['white', 'black'].includes(color)\n  const isGreyColor = color && color.match(/^grey\\.\\d{3}/)\n  const isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/)\n  const isTextColor = color && ['textPrimary', 'textSecondary'].includes(color)\n  switch (true) {\n    case isCommonColor:\n      // @ts-expect-error - todo.\n      return theme.palette.common[color]\n    case Boolean(isGreyColor):\n      const scale = color.split('.')[1]\n      // @ts-expect-error - todo.\n      return theme.palette.grey[scale] || theme.palette.grey[900]\n    case Boolean(isSemanticColor):\n      const [paletteKey, variant = 'main'] = color.split('.')\n      // @ts-expect-error - todo.\n      return theme.palette[paletteKey][variant]\n    case isTextColor:\n      // @ts-expect-error - todo.\n      return theme.palette.text[color.slice(4).toLowerCase()]\n    default:\n      return undefined\n  }\n}\n\ntype StyleProps = Pick<TypographyProps, 'color' | 'weight'> & {\n  variant: NonNullable<TypographyProps['variant']>\n}\n\nexport const useTypographyStyles = makeStyles<Theme, StyleProps>((theme) => ({\n  root: {\n    [`& .${iconStaticClassName}`]: {\n      position: 'relative',\n      top: '0.125em',\n      padding: '0 0.125em',\n      boxSizing: 'content-box',\n    },\n    fontFamily: theme.typography.fontFamily,\n    fontWeight: ({ variant, weight }) => (weight ? weights[weight] : theme.typography[variant].fontWeight),\n    fontSize: ({ variant }) => theme.typography[variant].fontSize,\n    lineHeight: ({ variant }) => theme.typography[variant].lineHeight,\n    textTransform: ({ variant }) => theme.typography[variant].textTransform,\n    color: ({ color, variant }) => (color && getCustomColor(theme, color)) || theme.typography[variant].color,\n  },\n  caption: {\n    display: 'inline',\n  },\n  overline: {\n    display: 'inline',\n  },\n}))\n"],"names":[],"mappings":";;;AAKA,MAAM,OAAO,GAAG;AACd,IAAA,OAAO,EAAE,GAAG;AACZ,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,WAAW,EAAE,GAAG;AAChB,IAAA,IAAI,EAAE,GAAG;CACV;AAED,MAAM,cAAc,GAAG,CAAC,KAAY,EAAE,KAAa,KAAI;AACrD,IAAA,MAAM,aAAa,GAAG,KAAK,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;IACjE,MAAM,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC;IACxD,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,+DAA+D,CAAC;AAC7G,IAAA,MAAM,WAAW,GAAG,KAAK,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;IAC7E,QAAQ,IAAI;AACV,QAAA,KAAK,aAAa;;YAEhB,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,KAAK,OAAO,CAAC,WAAW,CAAC;YACvB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;AAEjC,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QAC7D,KAAK,OAAO,CAAC,eAAe,CAAC;AAC3B,YAAA,MAAM,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;YAEvD,OAAO,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;AAC3C,QAAA,KAAK,WAAW;;AAEd,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACzD,QAAA;AACE,YAAA,OAAO,SAAS;;AAEtB,CAAC;AAMY,MAAA,mBAAmB,GAAG,UAAU,CAAoB,CAAC,KAAK,MAAM;AAC3E,IAAA,IAAI,EAAE;AACJ,QAAA,CAAC,CAAM,GAAA,EAAA,mBAAmB,CAAE,CAAA,GAAG;AAC7B,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,SAAS,EAAE,aAAa;AACzB,SAAA;AACD,QAAA,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;AACvC,QAAA,UAAU,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;AACtG,QAAA,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;AAC7D,QAAA,UAAU,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU;AACjE,QAAA,aAAa,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,aAAa;AACvE,QAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK;AAC1G,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,QAAQ;AAClB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,QAAQ;AAClB,KAAA;AACF,CAAA,CAAC;;;;"}

package/build/esm/hooks/useCollapsibleText.js

@@ -1,15 +1,15 @@
 import { useState } from 'react';
 
-var useCollapsibleText = function () {
-    var _a = useState(false), open = _a[0], setOpen = _a[1];
-    var collapseState = useState(false);
-    var toggle = function () { return collapseState[0] && setOpen(!open); };
+const useCollapsibleText = () => {
+    const [open, setOpen] = useState(false);
+    const collapseState = useState(false);
+    const toggle = () => collapseState[0] && setOpen(!open);
     return {
         collapsibleText: {
-            open: open,
-            collapseState: collapseState,
+            open,
+            collapseState,
         },
-        toggle: toggle,
+        toggle,
     };
 };
 

package/build/esm/hooks/useCollapsibleText.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCollapsibleText.js","sources":["../../../src/hooks/useCollapsibleText.ts"],"sourcesContent":["import { useState } from 'react'\n\ninterface CollapsibleTextHookResult {\n  collapsibleText: {\n    open: boolean\n    collapseState: [boolean, (collapsible: boolean) => void]\n  }\n  toggle: () => void\n}\n\nexport const useCollapsibleText: () => CollapsibleTextHookResult = () => {\n  const [open, setOpen] = useState(false)\n  const collapseState = useState(false)\n  const toggle = () => collapseState[0] && setOpen(!open)\n  return {\n    collapsibleText: {\n      open,\n      collapseState,\n    },\n    toggle,\n  }\n}\n"],"names":[],"mappings":";;AAUa,IAAA,kBAAkB,GAAoC,YAAA;IAC3D,IAAA,EAAA,GAAkB,QAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,OAAO,GAAA,EAAA,CAAA,CAAA,CAAmB;AACvC,IAAA,IAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC;AACrC,IAAA,IAAM,MAAM,GAAG,YAAA,EAAM,OAAA,aAAa,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA;IACvD,OAAO;AACL,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAA,IAAA;AACJ,YAAA,aAAa,EAAA,aAAA;AACd,SAAA;AACD,QAAA,MAAM,EAAA,MAAA;KACP;AACH;;;;"}
+{"version":3,"file":"useCollapsibleText.js","sources":["../../../src/hooks/useCollapsibleText.ts"],"sourcesContent":["import { useState } from 'react'\n\ninterface CollapsibleTextHookResult {\n  collapsibleText: {\n    open: boolean\n    collapseState: [boolean, (collapsible: boolean) => void]\n  }\n  toggle: () => void\n}\n\nexport const useCollapsibleText: () => CollapsibleTextHookResult = () => {\n  const [open, setOpen] = useState(false)\n  const collapseState = useState(false)\n  const toggle = () => collapseState[0] && setOpen(!open)\n  return {\n    collapsibleText: {\n      open,\n      collapseState,\n    },\n    toggle,\n  }\n}\n"],"names":[],"mappings":";;AAUO,MAAM,kBAAkB,GAAoC,MAAK;IACtE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC;AACrC,IAAA,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,IAAI,CAAC;IACvD,OAAO;AACL,QAAA,eAAe,EAAE;YACf,IAAI;YACJ,aAAa;AACd,SAAA;QACD,MAAM;KACP;AACH;;;;"}

package/build/esm/hooks/useTabs/useTabs.js

@@ -1,22 +1,22 @@
 import { useState } from 'react';
 
-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 = {
+const useTabs = (options) => {
+    const { initialTab } = options;
+    const genTabId = (id) => `tab-${id}`.toLowerCase().replace(/ /g, '-');
+    const genPanelId = (id) => `tab-panel-${id}`.toLowerCase().replace(/ /g, '-');
+    const [activeTab, setActiveTab] = useState(genTabId(initialTab));
+    const handleChange = (_, nextTab) => setActiveTab(nextTab);
+    const TabsProps = { onChange: handleChange, value: activeTab };
+    const useTab = (baseId) => {
+        const tabId = genTabId(baseId);
+        const tabPanelId = genPanelId(baseId);
+        const tabProps = {
             id: tabId,
             label: baseId,
             value: tabId,
             'aria-controls': tabPanelId,
         };
-        var panelProps = {
+        const panelProps = {
             id: tabPanelId,
             role: 'tabpanel',
             show: activeTab === tabId,
@@ -25,9 +25,9 @@ var useTabs = function (options) {
         return [tabProps, panelProps];
     };
     return {
-        TabsProps: TabsProps,
-        useTab: useTab,
-        setActiveTab: function (tabId) { return setActiveTab(tabId); },
+        TabsProps,
+        useTab,
+        setActiveTab: (tabId) => setActiveTab(tabId),
     };
 };
 

package/build/esm/hooks/useTabs/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabs.js","sources":["../../../../src/hooks/useTabs/useTabs.ts"],"sourcesContent":["import { SyntheticEvent, useState } from 'react'\nimport { UseTabsOptions } from './useTabsOptions'\nimport { UseTabsResult, UseTabResult } from './useTabsResult'\n\nexport const useTabs = (options: UseTabsOptions): UseTabsResult => {\n  const { initialTab } = options\n  const genTabId = (id: string) => `tab-${id}`.toLowerCase().replace(/ /g, '-')\n  const genPanelId = (id: string) => `tab-panel-${id}`.toLowerCase().replace(/ /g, '-')\n  const [activeTab, setActiveTab] = useState(genTabId(initialTab))\n  const handleChange = (_: SyntheticEvent, nextTab: string) => setActiveTab(nextTab)\n  const TabsProps = { onChange: handleChange, value: activeTab }\n  const useTab = (baseId: string) => {\n    const tabId = genTabId(baseId)\n    const tabPanelId = genPanelId(baseId)\n    const tabProps = {\n      id: tabId,\n      label: baseId,\n      value: tabId,\n      'aria-controls': tabPanelId,\n    }\n    const panelProps = {\n      id: tabPanelId,\n      role: 'tabpanel',\n      show: activeTab === tabId,\n      'aria-labelledby': tabId,\n    }\n    return [tabProps, panelProps] as UseTabResult\n  }\n  return {\n    TabsProps,\n    useTab,\n    setActiveTab: (tabId: string) => setActiveTab(tabId),\n  }\n}\n"],"names":[],"mappings":";;AAIO,IAAM,OAAO,GAAG,UAAC,OAAuB,EAAA;AACrC,IAAA,IAAA,UAAU,GAAK,OAAO,CAAA,UAAZ;IAClB,IAAM,QAAQ,GAAG,UAAC,EAAU,IAAK,OAAA,CAAA,MAAO,GAAA,EAAI,EAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAA5C,EAA4C;IAC7E,IAAM,UAAU,GAAG,UAAC,EAAU,IAAK,OAAA,CAAA,YAAa,GAAA,EAAI,EAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAlD,EAAkD;AAC/E,IAAA,IAAA,EAA4B,GAAA,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAzD,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAAkC;AAChE,IAAA,IAAM,YAAY,GAAG,UAAC,CAAiB,EAAE,OAAe,EAAA,EAAK,OAAA,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA;IAClF,IAAM,SAAS,GAAG,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE;IAC9D,IAAM,MAAM,GAAG,UAAC,MAAc,EAAA;AAC5B,QAAA,IAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC;AAC9B,QAAA,IAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;AACrC,QAAA,IAAM,QAAQ,GAAG;AACf,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,eAAe,EAAE,UAAU;SAC5B;AACD,QAAA,IAAM,UAAU,GAAG;AACjB,YAAA,EAAE,EAAE,UAAU;AACd,YAAA,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,SAAS,KAAK,KAAK;AACzB,YAAA,iBAAiB,EAAE,KAAK;SACzB;AACD,QAAA,OAAO,CAAC,QAAQ,EAAE,UAAU,CAAiB;AAC/C,KAAC;IACD,OAAO;AACL,QAAA,SAAS,EAAA,SAAA;AACT,QAAA,MAAM,EAAA,MAAA;QACN,YAAY,EAAE,UAAC,KAAa,EAAK,EAAA,OAAA,YAAY,CAAC,KAAK,CAAC,CAAA,EAAA;KACrD;AACH;;;;"}
+{"version":3,"file":"useTabs.js","sources":["../../../../src/hooks/useTabs/useTabs.ts"],"sourcesContent":["import { SyntheticEvent, useState } from 'react'\nimport { UseTabsOptions } from './useTabsOptions'\nimport { UseTabsResult, UseTabResult } from './useTabsResult'\n\nexport const useTabs = (options: UseTabsOptions): UseTabsResult => {\n  const { initialTab } = options\n  const genTabId = (id: string) => `tab-${id}`.toLowerCase().replace(/ /g, '-')\n  const genPanelId = (id: string) => `tab-panel-${id}`.toLowerCase().replace(/ /g, '-')\n  const [activeTab, setActiveTab] = useState(genTabId(initialTab))\n  const handleChange = (_: SyntheticEvent, nextTab: string) => setActiveTab(nextTab)\n  const TabsProps = { onChange: handleChange, value: activeTab }\n  const useTab = (baseId: string) => {\n    const tabId = genTabId(baseId)\n    const tabPanelId = genPanelId(baseId)\n    const tabProps = {\n      id: tabId,\n      label: baseId,\n      value: tabId,\n      'aria-controls': tabPanelId,\n    }\n    const panelProps = {\n      id: tabPanelId,\n      role: 'tabpanel',\n      show: activeTab === tabId,\n      'aria-labelledby': tabId,\n    }\n    return [tabProps, panelProps] as UseTabResult\n  }\n  return {\n    TabsProps,\n    useTab,\n    setActiveTab: (tabId: string) => setActiveTab(tabId),\n  }\n}\n"],"names":[],"mappings":";;AAIa,MAAA,OAAO,GAAG,CAAC,OAAuB,KAAmB;AAChE,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO;IAC9B,MAAM,QAAQ,GAAG,CAAC,EAAU,KAAK,OAAO,EAAE,CAAA,CAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;IAC7E,MAAM,UAAU,GAAG,CAAC,EAAU,KAAK,aAAa,EAAE,CAAA,CAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;AACrF,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAChE,IAAA,MAAM,YAAY,GAAG,CAAC,CAAiB,EAAE,OAAe,KAAK,YAAY,CAAC,OAAO,CAAC;IAClF,MAAM,SAAS,GAAG,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE;AAC9D,IAAA,MAAM,MAAM,GAAG,CAAC,MAAc,KAAI;AAChC,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC;AAC9B,QAAA,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;AACrC,QAAA,MAAM,QAAQ,GAAG;AACf,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,eAAe,EAAE,UAAU;SAC5B;AACD,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,EAAE,EAAE,UAAU;AACd,YAAA,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,SAAS,KAAK,KAAK;AACzB,YAAA,iBAAiB,EAAE,KAAK;SACzB;AACD,QAAA,OAAO,CAAC,QAAQ,EAAE,UAAU,CAAiB;AAC/C,KAAC;IACD,OAAO;QACL,SAAS;QACT,MAAM;QACN,YAAY,EAAE,CAAC,KAAa,KAAK,YAAY,CAAC,KAAK,CAAC;KACrD;AACH;;;;"}

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

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

package/build/esm/types/index.d.ts

@@ -1,2 +1,2 @@
-export declare type ThemeColors = 'primary' | 'secondary' | 'inherit';
-export declare type SeverityColors = 'info' | 'error' | 'warning' | 'success';
+export type ThemeColors = 'primary' | 'secondary' | 'inherit';
+export type SeverityColors = 'info' | 'error' | 'warning' | 'success';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popmenu/common-ui",
-  "version": "0.127.0",
+  "version": "0.128.0",
   "license": "MIT",
   "author": "Popmenu Design System Team",
   "description": "React components for all Popmenu apps on the web.",
@@ -30,5 +30,5 @@
     "react": "17.x"
   },
   "sideEffects": false,
-  "gitHead": "f751088de93963397e3f7525b1b8b3102f5538a0"
+  "gitHead": "10a5cf520116ca9c4ba501072a77e74758f52814"
 }