uangcermat-web-toolkit-v2 0.2.13 → 0.2.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/src/assets/icons/checkbox-fill.svg.js +1 -1
- package/build/src/assets/icons/checkbox-indeterminate-fill.svg.js +1 -1
- package/build/src/assets/icons/expense.svg.js +1 -1
- package/build/src/assets/icons/radioButton.svg.js +1 -1
- package/build/src/blocks/Form/Form.Group.js +1 -1
- package/build/src/blocks/Form/Form.Group.js.map +1 -1
- package/build/src/blocks/Navbar/Navbar.js +1 -1
- package/build/src/blocks/Navbar/Navbar.js.map +1 -1
- package/build/src/blocks/Sidebar/Sidebar.js +1 -1
- package/build/src/blocks/Sidebar/Sidebar.js.map +1 -1
- package/build/src/components/Checkbox/Checkbox.js +7 -7
- package/build/src/components/Checkbox/Checkbox.js.map +1 -1
- package/build/src/components/RadioButton/RadioButton.js +9 -11
- package/build/src/components/RadioButton/RadioButton.js.map +1 -1
- package/build/src/components/Tabs/Tabs.js +3 -3
- package/build/src/components/Tabs/Tabs.js.map +1 -1
- package/build/src/components/Tooltip/BaseTooltip.d.ts +13 -0
- package/build/src/components/Tooltip/BaseTooltip.js +2 -0
- package/build/src/components/Tooltip/BaseTooltip.js.map +1 -0
- package/build/src/components/Tooltip/BaseTooltip.type.d.ts +25 -0
- package/build/src/components/Tooltip/index.d.ts +2 -0
- package/build/src/components/index.d.ts +1 -0
- package/build/src/index.js +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=r.createElement("path",{clipRule:"evenodd",d:"M1.333 0h9.334C11.4 0 12 .6 12 1.333v9.334C12 11.4 11.4 12 10.667 12H1.333C.6 12 0 11.4 0 10.667V1.333C0 .6.6 0 1.333 0zm8.459 3.943L5.079 8.657 2.25 5.828l.943-.943 1.886 1.886L8.849 3l.943.943z"})))};
|
|
2
2
|
//# sourceMappingURL=checkbox-fill.svg.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=r.createElement("path",{clipRule:"evenodd",d:"M1.333 0h9.334C11.4 0 12 .6 12 1.333v9.334C12 11.4 11.4 12 10.667 12H1.333C.6 12 0 11.4 0 10.667V1.333C0 .6.6 0 1.333 0zm8 5.333H2.667v1.334h6.666V5.333z"})))};
|
|
2
2
|
//# sourceMappingURL=checkbox-indeterminate-fill.svg.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,c.get?c:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,a,c,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var c in a)({}).hasOwnProperty.call(a,c)&&(e[c]=a[c])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:12,height:14,viewBox:"0 0 12 14",fill:"red",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=r.createElement("path",{d:"M1.44 12.477V1.523h7.8V5.9c.42.093.809.27 1.147.513V.835a.459.459 0 00-.459-.459H.753a.459.459 0 00-.46.46v12.329c0 .253.206.459.46.459h9.175a.459.459 0 00.46-.46v-1.62c-.34.243-.728.42-1.148.513v.42h-7.8z",fill:"#fff"})),a||(a=r.createElement("path",{d:"M5.487 9.724c.108.446.31.855.586 1.204h-3.6V9.724h3.014zM5.406 8.75c.031-.432.149-.84.336-1.205H2.473v1.204h2.933zM8.15 5.85a3.14 3.14 0 00-1.635.72H2.473V5.366h5.678v.484zM8.15 3.186H4.424v1.205h3.728V3.186zM7.601 7.897c-.01 0-.014.005-.014.015v.504a.011.011 0 00.008.007l.006.001h.382a.274.274 0 00.198-.072.246.246 0 00.079-.19.246.246 0 00-.079-.189.268.268 0 00-.198-.076h-.382zM9.66 9.542a.567.567 0 00.072-.308.59.59 0 00-.061-.292.227.227 0 00-.216-.125.216.216 0 00-.2.125.587.587 0 00-.062.295c0 .13.021.23.064.302.045.078.111.117.198.117a.23.23 0 00.204-.114z",fill:"#fff"})),c||(c=r.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.075 8.979a2.523 2.523 0 11-5.046 0 2.523 2.523 0 015.046 0zm-2.78.605a.041.041 0 01-.041-.027l-.364-.806c-.004-.008-.01-.012-.018-.012h-.27a.016.016 0 00-.011.003c-.003.002-.004.006-.004.012v.795c0 .01-.004.018-.012.026a.032.032 0 01-.023.009H7.21a.043.043 0 01-.027-.01.043.043 0 01-.008-.025v-1.97c0-.009.003-.017.008-.023a.036.036 0 01.027-.011h.833c.124 0 .233.025.327.076a.52.52 0 01.218.215.648.648 0 01.079.323.583.583 0 01-.1.341.53.53 0 01-.276.198c-.005.002-.008.005-.01.008-.001.003 0 .008.001.013l.396.824a.045.045 0 01.006.017c0 .016-.01.024-.032.024h-.358zm1.81-.694c.035.099.053.215.053.35 0 .133-.019.255-.056.364a.631.631 0 01-.212.297.573.573 0 01-.356.107.395.395 0 01-.326-.145c-.004-.006-.008-.008-.012-.006s-.006.006-.006.012v.623c0 .01-.004.017-.011.023a.028.028 0 01-.024.012h-.34a.036.036 0 01-.034-.024.039.039 0 01-.002-.011v-1.97c0-.009.003-.017.009-.022a.036.036 0 01.026-.012h.341c.01 0 .018.004.024.012a.028.028 0 01.01.019l.001.004v.101l.001.002.002.003.003.002c.004 0 .008-.002.012-.006a.402.402 0 01.338-.16c.134 0 .25.038.347.113.099.074.17.178.212.312z",fill:"#fff"})))};
|
|
2
2
|
//# sourceMappingURL=expense.svg.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r,n=e(require("react"));function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(null,arguments)}exports.ReactComponent=function(e){return n.createElement("svg",c({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=n.createElement("path",{d:"M6.005 3.004c-1.68 0-3.001 1.32-3.001 3s1.32 3.001 3 3.001c1.681 0 3.001-1.32 3.001-3 0-1.681-1.32-3.001-3-3.001z"})),r||(r=n.createElement("path",{clipRule:"evenodd",d:"M12 6A6 6 0 110 6a6 6 0 0112 0zm-.9 0A5.1 5.1 0 11.9 6a5.1 5.1 0 0110.2 0z"})))};
|
|
2
2
|
//# sourceMappingURL=radioButton.svg.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("../../../node_modules/prop-types/index.js"),o=require("styled-components");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js"),require("../../components/Text/BaseText.js");var s=require("../../components/Text/Text.js");require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js"),require("../../components/Button/BaseButton.js"),require("../../components/Button/BaseButtonIcon.js"),require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js");var n=require("../../styles/Colors.js");require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js"),require("../../../node_modules/classnames/index.js"),require("react");var t=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/Container/BaseCollapsibleContainer.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js");var a=require("../../styles/Spacing.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js"),require("../../components/Popover/BasePopover.js"),require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js"),require("../../components/SelectPicker/SelectPicker.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Uploader/BaseUploader.js");const c=i(o).default.div`
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("../../../node_modules/prop-types/index.js"),o=require("styled-components");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js"),require("../../components/Text/BaseText.js");var s=require("../../components/Text/Text.js");require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js"),require("../../components/Button/BaseButton.js"),require("../../components/Button/BaseButtonIcon.js"),require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js");var n=require("../../styles/Colors.js");require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js"),require("../../../node_modules/classnames/index.js"),require("react");var t=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/Container/BaseCollapsibleContainer.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js");var a=require("../../styles/Spacing.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js"),require("../../components/Popover/BasePopover.js"),require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js"),require("../../components/SelectPicker/SelectPicker.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Tooltip/BaseTooltip.js"),require("../../components/Uploader/BaseUploader.js");const c=i(o).default.div`
|
|
2
2
|
margin-bottom: ${e=>e.errorMessage||e.helperMessage?a.MarginType.micro:a.MarginType.none};
|
|
3
3
|
label {
|
|
4
4
|
p {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.Group.js","sources":["../../../../src/blocks/Form/Form.Group.tsx"],"sourcesContent":["import * as PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Icon, Text } from '../../components/index';\nimport { ColorBlue, ColorDark, ColorRed } from '../../styles/Colors';\nimport { MarginType } from '../../styles/Spacing';\nimport { FormGroupInterface } from './Form.Group.type';\n\nconst FormGroupContainer = styled.div`\n margin-bottom: ${(props: FormGroupInterface) =>\n props.errorMessage || props.helperMessage ? MarginType.micro : MarginType.none};\n label {\n p {\n display: inline;\n }\n }\n`;\n\nconst FormGroup = (props: FormGroupInterface) => (\n <FormGroupContainer data-test-id={props.dataTestId} {...props}>\n <div style={{ display: 'flex', alignItems: 'center' }}>\n {props.prefixIcon && <Icon size='extra-small' {...props.prefixIcon} />}\n <label\n htmlFor={props.htmlFor}\n style={{ marginLeft: props.prefixIcon ? MarginType['extra-small'] : MarginType.none }}\n >\n <Text\n label={`${props.label}`}\n color={\n props.variant === 'box'\n ? props.titleTextColor === 'dark'\n ? ColorDark.blackCoral\n : ColorBlue.yaleBlue\n : ColorDark.gumbo\n }\n variant={props.variant === 'box' ? 'medium' : 'small'}\n {...props.labelTextStyle}\n />\n {props.isRequired && (\n <Text\n label='*'\n color={ColorRed.fireEngineRed}\n variant={props.variant === 'box' ? 'medium' : 'small'}\n />\n )}\n </label>\n </div>\n <div style={{ display: 'flex', marginTop: '8px' }}>{props.children}</div>\n <div style={{ marginTop: !!props.errorMessage || !!props.helperMessage ? '4px' : '0px' }}>\n {props.errorMessage ? (\n <Text\n label={props.errorMessage}\n variant='small'\n textTransform={props.errorTextTransform}\n color={ColorRed.fireEngineRed}\n />\n ) : (\n !!props.helperMessage && (\n <Text\n label={props.helperMessage}\n variant='extra-small'\n textTransform={props.helperTextTransform}\n color={props.helperTextColor ?? ColorDark.gumbo}\n />\n )\n )}\n </div>\n </FormGroupContainer>\n);\n\nFormGroup.prototype = {\n variant: PropTypes.string\n};\n\nFormGroup.defaultProps = {\n variant: 'box'\n};\n\nexport default FormGroup;\n"],"names":["FormGroupContainer","styled","div","props","errorMessage","helperMessage","MarginType","micro","none","FormGroup","_jsxs","dataTestId","children","Object","assign","style","display","alignItems","prefixIcon","_jsx","Icon","size","htmlFor","marginLeft","jsx","Text","label","color","variant","titleTextColor","ColorDark","blackCoral","ColorBlue","yaleBlue","gumbo","labelTextStyle","isRequired","ColorRed","fireEngineRed","marginTop","textTransform","errorTextTransform","helperTextTransform","_a","helperTextColor","prototype","PropTypes.string","propTypesExports","string","defaultProps"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form.Group.js","sources":["../../../../src/blocks/Form/Form.Group.tsx"],"sourcesContent":["import * as PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Icon, Text } from '../../components/index';\nimport { ColorBlue, ColorDark, ColorRed } from '../../styles/Colors';\nimport { MarginType } from '../../styles/Spacing';\nimport { FormGroupInterface } from './Form.Group.type';\n\nconst FormGroupContainer = styled.div`\n margin-bottom: ${(props: FormGroupInterface) =>\n props.errorMessage || props.helperMessage ? MarginType.micro : MarginType.none};\n label {\n p {\n display: inline;\n }\n }\n`;\n\nconst FormGroup = (props: FormGroupInterface) => (\n <FormGroupContainer data-test-id={props.dataTestId} {...props}>\n <div style={{ display: 'flex', alignItems: 'center' }}>\n {props.prefixIcon && <Icon size='extra-small' {...props.prefixIcon} />}\n <label\n htmlFor={props.htmlFor}\n style={{ marginLeft: props.prefixIcon ? MarginType['extra-small'] : MarginType.none }}\n >\n <Text\n label={`${props.label}`}\n color={\n props.variant === 'box'\n ? props.titleTextColor === 'dark'\n ? ColorDark.blackCoral\n : ColorBlue.yaleBlue\n : ColorDark.gumbo\n }\n variant={props.variant === 'box' ? 'medium' : 'small'}\n {...props.labelTextStyle}\n />\n {props.isRequired && (\n <Text\n label='*'\n color={ColorRed.fireEngineRed}\n variant={props.variant === 'box' ? 'medium' : 'small'}\n />\n )}\n </label>\n </div>\n <div style={{ display: 'flex', marginTop: '8px' }}>{props.children}</div>\n <div style={{ marginTop: !!props.errorMessage || !!props.helperMessage ? '4px' : '0px' }}>\n {props.errorMessage ? (\n <Text\n label={props.errorMessage}\n variant='small'\n textTransform={props.errorTextTransform}\n color={ColorRed.fireEngineRed}\n />\n ) : (\n !!props.helperMessage && (\n <Text\n label={props.helperMessage}\n variant='extra-small'\n textTransform={props.helperTextTransform}\n color={props.helperTextColor ?? ColorDark.gumbo}\n />\n )\n )}\n </div>\n </FormGroupContainer>\n);\n\nFormGroup.prototype = {\n variant: PropTypes.string\n};\n\nFormGroup.defaultProps = {\n variant: 'box'\n};\n\nexport default FormGroup;\n"],"names":["FormGroupContainer","styled","div","props","errorMessage","helperMessage","MarginType","micro","none","FormGroup","_jsxs","dataTestId","children","Object","assign","style","display","alignItems","prefixIcon","_jsx","Icon","size","htmlFor","marginLeft","jsx","Text","label","color","variant","titleTextColor","ColorDark","blackCoral","ColorBlue","yaleBlue","gumbo","labelTextStyle","isRequired","ColorRed","fireEngineRed","marginTop","textTransform","errorTextTransform","helperTextTransform","_a","helperTextColor","prototype","PropTypes.string","propTypesExports","string","defaultProps"],"mappings":"o1FAQA,MAAMA,OAAqBC,QAAOC,GAAG;mBACjBC,GAChBA,EAAMC,cAAgBD,EAAME,cAAgBC,aAAWC,MAAQD,EAAUA,WAACE;;;;;;EAQxEC,EAAaN,UAA8B,OAC/CO,EAAAA,KAACV,gCAAiCG,EAAMQ,YAAgBR,EACtD,CAAAS,SAAA,CAAAF,EAAAA,KAAA,MAAAG,OAAAC,OAAA,CAAKC,MAAO,CAAEC,QAAS,OAAQC,WAAY,sBACxCd,EAAMe,YAAcC,EAAAA,IAACC,EAAKP,OAAAC,OAAA,CAAAO,KAAK,eAAkBlB,EAAMe,aACxDR,EAAAA,KAAA,QAAAG,OAAAC,OAAA,CACEQ,QAASnB,EAAMmB,QACfP,MAAO,CAAEQ,WAAYpB,EAAMe,WAAaZ,EAAAA,WAAW,eAAiBA,EAAAA,WAAWE,OAE/E,CAAAI,SAAA,CAAAO,EAAAK,IAACC,EAAI,QACHZ,OAAAC,OAAA,CAAAY,MAAO,GAAGvB,EAAMuB,QAChBC,MACoB,QAAlBxB,EAAMyB,QACuB,SAAzBzB,EAAM0B,eACJC,EAAAA,UAAUC,WACVC,EAAAA,UAAUC,SACZH,EAAAA,UAAUI,MAEhBN,QAA2B,QAAlBzB,EAAMyB,QAAoB,SAAW,SAC1CzB,EAAMgC,iBAEXhC,EAAMiC,YACLjB,MAACM,EAAI,QAAA,CACHC,MAAM,IACNC,MAAOU,EAAQA,SAACC,cAChBV,QAA2B,QAAlBzB,EAAMyB,QAAoB,SAAW,kBAKtDT,2BAAKJ,MAAO,CAAEC,QAAS,OAAQuB,UAAW,kBAAUpC,EAAMS,YAC1DO,2BAAKJ,MAAO,CAAEwB,UAAapC,EAAMC,cAAkBD,EAAME,cAAgB,MAAQ,QAAO,CAAAO,SACrFT,EAAMC,aACLe,EAACK,IAAAC,EAAI,SACHC,MAAOvB,EAAMC,aACbwB,QAAQ,QACRY,cAAerC,EAAMsC,mBACrBd,MAAOU,EAAQA,SAACC,kBAGhBnC,EAAME,eACNc,EAAAA,IAACM,EAAAA,QACC,CAAAC,MAAOvB,EAAME,cACbuB,QAAQ,cACRY,cAAerC,EAAMuC,oBACrBf,cAAOgB,EAAAxC,EAAMyC,+BAAmBd,EAAAA,UAAUI,cAMrD,EAEDzB,EAAUoC,UAAY,CACpBjB,QAASkB,EAAgBC,iBAAAC,QAG3BvC,EAAUwC,aAAe,CACvBrB,QAAS"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var s=require("../../components/Text/BaseText.js");require("../../components/Text/Text.js"),require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js"),require("../../components/Button/BaseButton.js"),require("../../components/Button/BaseButtonIcon.js"),require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../styles/Colors.js"),require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js"),require("../../../node_modules/classnames/index.js"),require("react");var o=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/Container/BaseCollapsibleContainer.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../../styles/Spacing.js"),require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js"),require("../../components/Popover/BasePopover.js"),require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js");var n=require("../../components/RadioPicker/BaseRadioPicker.js");require("../../components/SelectPicker/SelectPicker.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Uploader/BaseUploader.js");var t=require("../../utils/getChildrenOnDisplayName.js"),i=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");const a=({isShowClose:e,containerStyles:s,onClickClose:n,children:a})=>{const c=t.getChildrenOnDisplayName(a,"Title"),l=t.getChildrenOnDisplayName(a,"Switcher");return r.jsxs("div",Object.assign({className:i.twMerge("flex flex-row items-center h-14 bg-light-whiteSolid shadow-lg w-full px-4",s)},{children:[c,l,e&&r.jsxs("button",Object.assign({className:"p-0 bg-transparent w-4 h-4 ml-4",onClick:()=>null==n?void 0:n()},{children:[r.jsx(o,{name:"closecirclefill",className:"w-full h-full fill-dark-blackCoral"})," "]}))]}))},c=({label:e,labelStyles:o,containerStyles:n,children:t})=>r.jsx(r.Fragment,{children:t||r.jsx("div",Object.assign({className:i.twMerge("flex flex-1 flex-row items-center h-full mr-4",n)},{children:r.jsx(s.default,{label:e,className:i.twMerge("text-sm font-semibold text-hyperlink-color-default",o)})}))});c.displayName="Title",a.Title=c;const l=s=>{var{children:o}=s,t=e.__rest(s,["children"]);return r.jsx(r.Fragment,{children:o||r.jsx("div",Object.assign({className:"flex flex-row items-center h-full"},{children:r.jsx(n,Object.assign({},t))}))})};l.displayName="Switcher",a.Switcher=l,module.exports=a;
|
|
1
|
+
"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var s=require("../../components/Text/BaseText.js");require("../../components/Text/Text.js"),require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js"),require("../../components/Button/BaseButton.js"),require("../../components/Button/BaseButtonIcon.js"),require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../styles/Colors.js"),require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js"),require("../../../node_modules/classnames/index.js"),require("react");var o=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/Container/BaseCollapsibleContainer.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../../styles/Spacing.js"),require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js"),require("../../components/Popover/BasePopover.js"),require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js");var n=require("../../components/RadioPicker/BaseRadioPicker.js");require("../../components/SelectPicker/SelectPicker.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Tooltip/BaseTooltip.js"),require("../../components/Uploader/BaseUploader.js");var t=require("../../utils/getChildrenOnDisplayName.js"),i=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");const a=({isShowClose:e,containerStyles:s,onClickClose:n,children:a})=>{const c=t.getChildrenOnDisplayName(a,"Title"),l=t.getChildrenOnDisplayName(a,"Switcher");return r.jsxs("div",Object.assign({className:i.twMerge("flex flex-row items-center h-14 bg-light-whiteSolid shadow-lg w-full px-4",s)},{children:[c,l,e&&r.jsxs("button",Object.assign({className:"p-0 bg-transparent w-4 h-4 ml-4",onClick:()=>null==n?void 0:n()},{children:[r.jsx(o,{name:"closecirclefill",className:"w-full h-full fill-dark-blackCoral"})," "]}))]}))},c=({label:e,labelStyles:o,containerStyles:n,children:t})=>r.jsx(r.Fragment,{children:t||r.jsx("div",Object.assign({className:i.twMerge("flex flex-1 flex-row items-center h-full mr-4",n)},{children:r.jsx(s.default,{label:e,className:i.twMerge("text-sm font-semibold text-hyperlink-color-default",o)})}))});c.displayName="Title",a.Title=c;const l=s=>{var{children:o}=s,t=e.__rest(s,["children"]);return r.jsx(r.Fragment,{children:o||r.jsx("div",Object.assign({className:"flex flex-row items-center h-full"},{children:r.jsx(n,Object.assign({},t))}))})};l.displayName="Switcher",a.Switcher=l,module.exports=a;
|
|
2
2
|
//# sourceMappingURL=Navbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navbar.js","sources":["../../../../src/blocks/Navbar/Navbar.tsx"],"sourcesContent":["import React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { BaseRadioPicker, BaseText, Icon } from '../../components';\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { NavbarInterface, NavbarSwitcherInterface, NavbarTitleInterface } from './Navbar.type';\n\nconst Navbar = ({ isShowClose, containerStyles, onClickClose, children }: NavbarInterface) => {\n const title = getChildrenOnDisplayName(children, 'Title');\n const switcher = getChildrenOnDisplayName(children, 'Switcher');\n\n return (\n <div\n className={twMerge(\n 'flex flex-row items-center h-14 bg-light-whiteSolid shadow-lg w-full px-4',\n containerStyles\n )}\n >\n {title}\n {switcher}\n {isShowClose && (\n <button className='p-0 bg-transparent w-4 h-4 ml-4' onClick={() => onClickClose?.()}>\n <Icon name='closecirclefill' className='w-full h-full fill-dark-blackCoral' />{' '}\n </button>\n )}\n </div>\n );\n};\n\nconst Title = ({ label, labelStyles, containerStyles, children }: NavbarTitleInterface) => {\n return (\n <>\n {children ? (\n children\n ) : (\n <div className={twMerge('flex flex-1 flex-row items-center h-full mr-4', containerStyles)}>\n <BaseText\n label={label}\n className={twMerge('text-sm font-semibold text-hyperlink-color-default', labelStyles)}\n />\n </div>\n )}\n </>\n );\n};\nTitle.displayName = 'Title';\nNavbar.Title = Title;\n\nconst Switcher = ({ children, ...props }: NavbarSwitcherInterface) => {\n return (\n <>\n {children ? (\n children\n ) : (\n <div className='flex flex-row items-center h-full'>\n <BaseRadioPicker {...props} />\n </div>\n )}\n </>\n );\n};\nSwitcher.displayName = 'Switcher';\nNavbar.Switcher = Switcher;\n\nexport default Navbar;\n"],"names":["Navbar","isShowClose","containerStyles","onClickClose","children","title","getChildrenOnDisplayName","switcher","_jsxs","jsxs","Object","assign","className","twMerge","onClick","_jsx","Icon","name","Title","label","labelStyles","jsx","_Fragment","Fragment","BaseText","displayName","Switcher","_a","props","__rest","BaseRadioPicker"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Navbar.js","sources":["../../../../src/blocks/Navbar/Navbar.tsx"],"sourcesContent":["import React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { BaseRadioPicker, BaseText, Icon } from '../../components';\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { NavbarInterface, NavbarSwitcherInterface, NavbarTitleInterface } from './Navbar.type';\n\nconst Navbar = ({ isShowClose, containerStyles, onClickClose, children }: NavbarInterface) => {\n const title = getChildrenOnDisplayName(children, 'Title');\n const switcher = getChildrenOnDisplayName(children, 'Switcher');\n\n return (\n <div\n className={twMerge(\n 'flex flex-row items-center h-14 bg-light-whiteSolid shadow-lg w-full px-4',\n containerStyles\n )}\n >\n {title}\n {switcher}\n {isShowClose && (\n <button className='p-0 bg-transparent w-4 h-4 ml-4' onClick={() => onClickClose?.()}>\n <Icon name='closecirclefill' className='w-full h-full fill-dark-blackCoral' />{' '}\n </button>\n )}\n </div>\n );\n};\n\nconst Title = ({ label, labelStyles, containerStyles, children }: NavbarTitleInterface) => {\n return (\n <>\n {children ? (\n children\n ) : (\n <div className={twMerge('flex flex-1 flex-row items-center h-full mr-4', containerStyles)}>\n <BaseText\n label={label}\n className={twMerge('text-sm font-semibold text-hyperlink-color-default', labelStyles)}\n />\n </div>\n )}\n </>\n );\n};\nTitle.displayName = 'Title';\nNavbar.Title = Title;\n\nconst Switcher = ({ children, ...props }: NavbarSwitcherInterface) => {\n return (\n <>\n {children ? (\n children\n ) : (\n <div className='flex flex-row items-center h-full'>\n <BaseRadioPicker {...props} />\n </div>\n )}\n </>\n );\n};\nSwitcher.displayName = 'Switcher';\nNavbar.Switcher = Switcher;\n\nexport default Navbar;\n"],"names":["Navbar","isShowClose","containerStyles","onClickClose","children","title","getChildrenOnDisplayName","switcher","_jsxs","jsxs","Object","assign","className","twMerge","onClick","_jsx","Icon","name","Title","label","labelStyles","jsx","_Fragment","Fragment","BaseText","displayName","Switcher","_a","props","__rest","BaseRadioPicker"],"mappings":"i3FAOA,MAAMA,EAAS,EAAGC,cAAaC,kBAAiBC,eAAcC,eAC5D,MAAMC,EAAQC,EAAAA,yBAAyBF,EAAU,SAC3CG,EAAWD,EAAAA,yBAAyBF,EAAU,YAEpD,OACEI,EACEC,KAAA,MAAAC,OAAAC,OAAA,CAAAC,UAAWC,UACT,4EACAX,IAGD,CAAAE,SAAA,CAAAC,EACAE,EACAN,GACCO,OAAA,SAAAE,OAAAC,OAAA,CAAQC,UAAU,kCAAkCE,QAAS,IAAMX,aAAA,EAAAA,KACjE,CAAAC,SAAA,CAAAW,MAACC,EAAI,CAACC,KAAK,kBAAkBL,UAAU,uCAAwC,WAIrF,EAGEM,EAAQ,EAAGC,QAAOC,cAAalB,kBAAiBE,cAElDW,EACGM,IAAAC,EAAAC,SAAA,CAAAnB,SAAAA,GAGCW,EAAAA,IAAK,MAAAL,OAAAC,OAAA,CAAAC,UAAWC,EAAOA,QAAC,gDAAiDX,IACvE,CAAAE,SAAAW,EAAAA,IAACS,EAAAA,QACC,CAAAL,MAAOA,EACPP,UAAWC,EAAOA,QAAC,qDAAsDO,UAOrFF,EAAMO,YAAc,QACpBzB,EAAOkB,MAAQA,EAEf,MAAMQ,EAAYC,IAAA,IAAAvB,SAAEA,GAA6CuB,EAAhCC,EAAKC,EAAAA,OAAAF,EAApB,cAChB,OACEZ,MACGO,EAAAA,SAAA,CAAAlB,SAAAA,GAGCW,EAAKM,IAAA,MAAAX,OAAAC,OAAA,CAAAC,UAAU,qCACb,CAAAR,SAAAW,EAAAA,IAACe,EAAepB,OAAAC,OAAA,GAAKiB,QAI3B,EAEJF,EAASD,YAAc,WACvBzB,EAAO0B,SAAWA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),a=require("react");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var s=require("../../components/Badge/BaseBadge.js"),n=require("../../components/Text/BaseText.js");require("../../components/Text/Text.js"),require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js");var l=require("../../components/Button/BaseButton.js"),o=require("../../components/Button/BaseButtonIcon.js");require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js"),require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js");var i=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/Container/BaseCollapsibleContainer.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../../styles/Spacing.js"),require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js");var r=require("../../components/Popover/BasePopover.js");require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js"),require("../../components/SelectPicker/SelectPicker.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Uploader/BaseUploader.js");var c=require("../../utils/getChildrenOnDisplayName.js"),d=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=u(a);const x=()=>e.jsx("div",{className:"w-full h-[1px] bg-sidebar-separator-default"}),g=({id:l,title:o,titleStyles:r,icon:c,iconStyles:u,subMenu:x,isCollapsed:g,activeId:b,selectedId:f,notificationCountContainerStyles:p,notificationCountTextStyles:j,itemMenuContainerStyles:h,itemMenuActiveContainerStyles:v,itemMenuActiveBgColor:w,itemSubMenuContainerStyles:y,itemSubMenuActiveContainerStyles:C,itemSubMenuActiveTextColor:S,onClickCollapsible:k,onExpand:N,onClickNav:M,notifcationCount:A})=>{const B=f===l,[P,q]=m.default.useState(!1),[O,I]=m.default.useState(!1),[T,L]=m.default.useState(!1);return a.useEffect((()=>{g?q(!1):setTimeout((()=>{q(!0)}),200)}),[g]),e.jsxs("div",Object.assign({className:d.twMerge(`overflow-hidden hover:bg-sidebar-menu-background-hover rounded-lg ${B?v||"bg-sidebar-menu-background-active":"bg-transparent"}`,h),style:{backgroundColor:B?w:void 0}},{children:[e.jsx("button",Object.assign({onClick:()=>{P||B||k(),N(B?"":l)},className:"h-8 pr-4 pl-3 w-full bg-transparent relative",onMouseDown:()=>L(!0),onMouseUp:()=>L(!1),onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1)},{children:e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(i,{name:c,className:d.twMerge(t.default("w-4 h-4 fill-sidebar-menu-textAndIcon-default",O&&"fill-sidebar-menu-textAndIcon-hover",T&&"fill-sidebar-menu-textAndIcon-active"),u)})})),P&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:o,className:d.twMerge(t.default("text-sidebar-menu-textAndIcon-default text-sm text-left line-clamp-1 w-full",O&&"text-sidebar-menu-textAndIcon-hover",T&&"text-sidebar-menu-textAndIcon-active"),r)})})),!!A&&e.jsx(s,{label:A.toString(),labelStyles:d.twMerge("text-[10px] text-sidebar-notificationBadge-textAndIcon-default",j),containerStyles:d.twMerge(t.default("flex items-center justify-center min-w-[16px] h-4 rounded-full p-0.5 bg-sidebar-notificationBadge-background-default",`${!P&&"absolute right-0 top-0"}`),p)})]}))})),e.jsx("div",Object.assign({className:"flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out "+(B&&P?"max-h-screen bg-sidebar-submenu-background-default":"max-h-0 "),style:{backgroundColor:B&&P?w:"transparent"}},{children:x.map(((t,a)=>e.jsx("button",Object.assign({onClick:()=>M(t),className:d.twMerge("\n flex flex-1 py-2 \n bg-sidebar-submenu-background-default active:bg-sidebar-submenu-background-active hover:bg-sidebar-submenu-background-hover \n text-sidebar-submenu-textAndIcon-default active:text-sidebar-submenu-textAndIcon-active hover:text-sidebar-submenu-textAndIcon-hover \n pl-8 "+(t.navLink===b?`pl-11 ${C||"text-sidebar-submenu-textAndIcon-active"}`:""),y),style:{color:t.navLink===b?S:void 0}},{children:e.jsx(n.default,{label:t.title,className:`text-xs text-left line-clamp-1 w-full ${t.navLink===b?"font-semibold":"font-normal"} `})}),a)))}))]}))},b=({activeId:t,activeParent:s,data:n,isCollapsed:l,notificationCountContainerStyles:i,notificationCountTextStyles:r,containerStyles:u,itemMenuContainerStyles:x,itemMenuIconStyles:b,itemMenuTitleStyles:f,itemMenuActiveBgColor:p,itemSubMenuContainerStyles:j,itemSubMenuActiveTextColor:h,toggleButtonContainerStyles:v,toggleIconOpenName:w,toggleIconCloseName:y,toggleIconStyles:C,onClickCollapsible:S,onClickNav:k,children:N})=>{const M=c.getChildrenOnDisplayName(N,"Header"),A=c.getChildrenOnDisplayName(N,"Footer"),B=c.getChildrenOnDisplayName(N,"UserProfile"),[P,q]=m.default.useState(s),O=a.Children.toArray(N);return e.jsxs("div",Object.assign({className:d.twMerge("flex flex-col relative h-full px-2 pb-2 ease-in-out duration-300 w-[220px] bg-sidebar-background-default",u)},{children:[M,e.jsx(o.default,{variant:"tertiary",onClick:()=>S(),iconName:l?y||"chevronDoubleArrowRight":w||"chevronDoubleArrowLeft",iconStyles:d.twMerge("w-[7.5px] h-[7.5px]",C),className:d.twMerge("w-6 h-6 absolute top-14 -right-3",v)}),e.jsx("div",Object.assign({className:"flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none"},{children:e.jsx("div",Object.assign({className:"flex flex-col justify-start flex-1"},{children:n.map(((a,s)=>e.jsx(g,{selectedId:P,id:a.id,title:a.title,icon:a.icon,permission:a.permission,isCollapsed:l,activeId:t,subMenu:a.subMenu,onClickCollapsible:()=>S(),onExpand:e=>q(e),onClickNav:e=>k(e),notifcationCount:a.notifcationCount,notificationCountContainerStyles:i,notificationCountTextStyles:r,itemMenuActiveBgColor:p,itemMenuContainerStyles:x,itemSubMenuActiveTextColor:h,itemSubMenuContainerStyles:j,iconStyles:b,titleStyles:f},s)))}))})),e.jsx("div",Object.assign({className:"mb-2"},{children:a.Children.map(O,((t,a)=>{const s=c.getChildrenOnDisplayName(t,"Popover");return e.jsx("div",Object.assign({className:"w-full"},{children:s}),a)}))})),B,A]}))},f=({isCollapsed:l,label:o,labelStyles:u,icon:x,iconStyles:g,notificationCount:b,notificationCountContainerStyles:f,notificationCountTextStyles:p,position:j,iconTriangleStyles:h,iconTriangleContainerStyles:v,panelContainerStyles:w,offsetX:y,offsetY:C,containerStyles:S,isAutoFlip:k,children:N})=>{const[M,A]=m.default.useState(!1),[B,P]=m.default.useState(!1),[q,O]=m.default.useState(!1);return a.useEffect((()=>{l?A(!1):setTimeout((()=>{A(!0)}),200)}),[l]),e.jsx(r,Object.assign({position:j||"right-start",iconTriangleStyles:h,iconTriangleContainerStyles:v,panelContainerStyles:w,offsetX:y,offsetY:C,isAutoFlip:k},{children:({open:a,close:l})=>e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{children:e.jsxs("button",Object.assign({className:d.twMerge(t.default("\n h-8 pr-4 pl-3 w-full relative flex flex-row items-center rounded-lg gap-x-2\n bg-sidebar-notificationButton-background-default active:bg-sidebar-notificationButton-background-active hover:bg-sidebar-notificationButton-background-hover\n text-sidebar-notificationButton-textAndIcon-default active:text-sidebar-notificationButton-textAndIcon-active hover:text-sidebar-notificationButton-textAndIcon-hover\n ",a&&"bg-sidebar-profile-background-active text-sidebar-profile-text-active"),S),onMouseDown:()=>O(!0),onMouseUp:()=>O(!1),onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(i,{name:x,className:d.twMerge(t.default("w-4 h-4 fill-sidebar-notificationButton-textAndIcon-default",B&&"fill-sidebar-notificationButton-textAndIcon-hover",q&&"fill-sidebar-notificationButton-textAndIcon-active"),g)})})),M&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:o,className:d.twMerge("text-sm text-left line-clamp-1 w-full",u)})})),!!b&&e.jsx(s,{label:b.toString(),labelStyles:d.twMerge("text-[10px] text-sidebar-notificationBadge-textAndIcon-default",p),containerStyles:d.twMerge(t.default("flex items-center justify-center bg-sidebar-notificationBadge-background-default min-w-[16px] h-4 rounded-full p-0.5",`${!M&&"absolute right-0 top-0"}`),f)})]}))}),e.jsx(r.Panel,{children:c.getChildrenOnDisplayName("function"==typeof N?N({open:a,close:l}):N,"PopoverPanel")})]})}))};f.displayName="Popover",b.Popover=f;const p=({children:t})=>e.jsx(e.Fragment,{children:t});p.displayName="PopoverPanel",b.PopoverPanel=p;const j=({isCollapsed:t,appLogoClosed:s,appLogoClosedStyles:n,appLogoOpened:l,appLogoOpenedStyles:o,containerStyles:i,onClickHeaderSidebar:r,children:c})=>{const[u,x]=m.default.useState(!1);return a.useEffect((()=>{t?x(!1):setTimeout((()=>{x(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:c||e.jsx("div",Object.assign({className:d.twMerge("flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer",i),onClick:()=>null==r?void 0:r()},{children:u?e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx("img",{src:l||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg",className:d.twMerge("w-[113px] h-7",o)})})):e.jsx("img",{src:s||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:d.twMerge("w-[22px] h-[22px]",n)})}))})};j.displayName="Header",b.Header=j;const h=({isCollapsed:s,userLabel:l,userLabelStyles:o,userAvatar:c,userAvatarFallback:u,userAvatarFallbackStyles:g,userAvatarStyles:b,containerStyles:f,panelContainerStyles:p,titleAtPanel:j,titleAtPanelStyles:h,userAvatarAtPanel:v,userAvatarAtPanelStyles:w,userAvatarFallbackAtPanel:y,userAvatarFallbackAtPanelStyles:C,userLabelAtPanel:S,userLabelAtPanelStyles:k,userEmailAtPanel:N,userEmailAtPanelStyles:M,manageAccountLabelAtPanel:A,manageAccountLabelAtPanelStyles:B,iconManageAccountAtPanel:P,iconManageAccountAtPanelStyles:q,onClickManageAccount:O,manageAccountContainerStyles:I,translationLabelAtPanel:T,translationLabelAtPanelStyles:L,iconTranslationAtPanel:F,iconTranslationAtPanelStyles:D,onClickTranslation:E,translationContainerStyles:H,logoutLabelAtPanel:R,logoutLabelAtPanelStyles:U,iconLogoutAtPanel:z,iconLogoutAtPanelStyles:G,onClickLogout:V,children:$,offsetX:_,offsetY:X,position:Y,isAutoFlip:J})=>{const[K,Q]=m.default.useState(!1);return a.useEffect((()=>{s?Q(!1):setTimeout((()=>{Q(!0)}),200)}),[s]),e.jsx(e.Fragment,{children:$||e.jsxs("div",Object.assign({className:d.twMerge("flex flex-col w-full")},{children:[e.jsx(x,{}),e.jsx("div",Object.assign({className:"relative min-h-[56px] flex items-center w-full"},{children:e.jsx(r,Object.assign({offsetX:_,offsetY:X,isAutoFlip:J,panelContainerStyles:p,containerStyles:"w-full",position:Y},{children:({open:a,close:s})=>e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{children:e.jsxs("div",Object.assign({className:d.twMerge(t.default("\n w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg \n bg-sidebar-profile-background-default active:bg-sidebar-profile-background-active hover:bg-sidebar-profile-background-hover \n text-sidebar-profile-text-default active:text-sidebar-profile-text-active hover:text-sidebar-profile-text-hover\n cursor-pointer\n ",a&&"bg-sidebar-profile-background-active text-sidebar-profile-text-active"),f)},{children:[c?e.jsx("img",{src:c||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:d.twMerge("w-6 h-6 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover",b)}):e.jsx("div",Object.assign({className:d.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx(n.default,{label:u,className:d.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",g)})})),K&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:l||"",className:d.twMerge("line-clamp-1 w-full text-left",o)})}))]}))}),e.jsx(r.Panel,{children:e.jsxs("div",Object.assign({className:d.twMerge("flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]",p)},{children:[e.jsx("div",Object.assign({className:"px-4"},{children:e.jsx(n.default,{label:j||"Account",className:d.twMerge("text-sm font-semibold text-dark-blackCoral",h)})})),e.jsxs("div",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-2"},{children:[v?e.jsx("img",{src:v||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:d.twMerge("w-8 h-8 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover",w)}):e.jsx("div",Object.assign({className:d.twMerge("flex items-center justify-center w-8 h-8 bg-sidebar-avatar-background-default rounded",w)},{children:e.jsx(n.default,{label:y,className:d.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",C)})})),e.jsxs("div",Object.assign({className:"flex flex-col"},{children:[e.jsx(n.default,{label:S||"",className:d.twMerge("w-full line-clamp-1 font-normal text-sm text-dark-blackCoral",k)}),e.jsx(n.default,{label:N||"",className:d.twMerge("w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo",M)})]}))]})),e.jsxs("button",Object.assign({className:d.twMerge("flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent",I),onClick:()=>{s(),null==O||O()}},{children:[e.jsx(i,{name:P||"configuration",className:d.twMerge("w-4 h-4 fill-dark-gumbo",q)}),e.jsx(n.default,{label:A||"Manage Account",className:d.twMerge("text-sm font-normal text-dark-blackCoral",B)})]})),e.jsxs("button",Object.assign({className:d.twMerge("flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent",H),onClick:()=>{s(),null==E||E()}},{children:[e.jsx(i,{name:F||"language",className:d.twMerge("w-4 h-4 fill-dark-gumbo",D)}),e.jsx(n.default,{label:T||"Translate Page",className:d.twMerge("text-sm font-normal text-dark-blackCoral",L)})]})),e.jsx("div",{className:"h-[1px] w-full bg-dark-silver"}),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent",onClick:()=>{s(),null==V||V()}},{children:[e.jsx(i,{name:z||"logout",className:d.twMerge("w-4 h-4 fill-dark-gumbo",G)}),e.jsx(n.default,{label:R||"Logout",className:d.twMerge("text-sm font-normal text-dark-blackCoral",U)})]}))]}))})]})}))})),e.jsx(x,{})]}))})};h.displayName="UserProfile",b.UserProfile=h;const v=({isCollapsed:s,isShowCompanyProfile:o,companyName:i,companyNameStyles:r,companyLogo:c,companyLogoStyles:u,companyLogoFallback:x,companlogoFallbackStyles:g,companyLogoContainerStyles:b,isShowButtonChangeCompany:f,buttonChangeCompanyOnClick:p,buttonChangeCompanyLabel:j,buttonChangeCompanyStyles:h,buttonChangeCompanyIconName:v,buttonChangeCompanyIconStyles:w,appName:y,appVersion:C,children:S})=>{const[k,N]=m.default.useState(!1);return a.useEffect((()=>{s?N(!1):setTimeout((()=>{N(!0)}),200)}),[s]),e.jsx(e.Fragment,{children:S||e.jsxs("div",Object.assign({className:"pt-2 px-2"},{children:[o&&e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[c?e.jsx("div",Object.assign({className:d.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx("img",{src:c||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:d.twMerge("w-4 h-4",u)})})):e.jsx("div",Object.assign({className:d.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx(n.default,{label:x,className:d.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",g)})})),k&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:i||"Gajicermat",className:d.twMerge("text-sidebar-companyNameText-default text-xs line-clamp-2",r)})}))]})),f&&e.jsx("div",Object.assign({className:"h-14 w-full flex flex-row items-center"},{children:e.jsx(l.default,{variant:"secondary",onClick:()=>null==p?void 0:p(),label:k?j||"Select Company":"",className:d.twMerge(t.default("flex items-center justify-center p-0 h-6 ml-0",k?"w-full":"w-6"),h),rightIcon:k?void 0:v||"refresh",rightIconStyles:d.twMerge("ml-0 w-3 h-3",w)})})),e.jsx("div",Object.assign({className:"flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full"},{children:k?e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:y||"© Gajicermat Digital Mandiri",className:"text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-right font-normal"})})),e.jsx("div",{className:"w-[1px] h-3 bg-sidebar-appVersionText-default"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:C||"Version 0.0.0",className:"text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-left font-normal"})}))]}):e.jsx("div",{className:"w-[1px] h-3 "})}))]}))})};v.displayName="Footer",b.Footer=v,module.exports=b;
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),a=require("react");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var s=require("../../components/Badge/BaseBadge.js"),n=require("../../components/Text/BaseText.js");require("../../components/Text/Text.js"),require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js");var o=require("../../components/Button/BaseButton.js"),l=require("../../components/Button/BaseButtonIcon.js");require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js"),require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js");var i=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/Container/BaseCollapsibleContainer.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../../styles/Spacing.js"),require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js");var r=require("../../components/Popover/BasePopover.js");require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js"),require("../../components/SelectPicker/SelectPicker.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Tooltip/BaseTooltip.js"),require("../../components/Uploader/BaseUploader.js");var c=require("../../utils/getChildrenOnDisplayName.js"),u=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=d(a);const x=()=>e.jsx("div",{className:"w-full h-[1px] bg-sidebar-separator-default"}),g=({id:o,title:l,titleStyles:r,icon:c,iconStyles:d,subMenu:x,isCollapsed:g,activeId:b,selectedId:f,notificationCountContainerStyles:p,notificationCountTextStyles:j,itemMenuContainerStyles:h,itemMenuActiveContainerStyles:v,itemMenuActiveBgColor:w,itemSubMenuContainerStyles:y,itemSubMenuActiveContainerStyles:C,itemSubMenuActiveTextColor:S,onClickCollapsible:k,onExpand:N,onClickNav:M,notifcationCount:A})=>{const B=f===o,[P,q]=m.default.useState(!1),[O,T]=m.default.useState(!1),[I,L]=m.default.useState(!1);return a.useEffect((()=>{g?q(!1):setTimeout((()=>{q(!0)}),200)}),[g]),e.jsxs("div",Object.assign({className:u.twMerge(`overflow-hidden hover:bg-sidebar-menu-background-hover rounded-lg ${B?v||"bg-sidebar-menu-background-active":"bg-transparent"}`,h),style:{backgroundColor:B?w:void 0}},{children:[e.jsx("button",Object.assign({onClick:()=>{P||B||k(),N(B?"":o)},className:"h-8 pr-4 pl-3 w-full bg-transparent relative",onMouseDown:()=>L(!0),onMouseUp:()=>L(!1),onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1)},{children:e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(i,{name:c,className:u.twMerge(t.default("w-4 h-4 fill-sidebar-menu-textAndIcon-default",O&&"fill-sidebar-menu-textAndIcon-hover",I&&"fill-sidebar-menu-textAndIcon-active"),d)})})),P&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:l,className:u.twMerge(t.default("text-sidebar-menu-textAndIcon-default text-sm text-left line-clamp-1 w-full",O&&"text-sidebar-menu-textAndIcon-hover",I&&"text-sidebar-menu-textAndIcon-active"),r)})})),!!A&&e.jsx(s,{label:A.toString(),labelStyles:u.twMerge("text-[10px] text-sidebar-notificationBadge-textAndIcon-default",j),containerStyles:u.twMerge(t.default("flex items-center justify-center min-w-[16px] h-4 rounded-full p-0.5 bg-sidebar-notificationBadge-background-default",`${!P&&"absolute right-0 top-0"}`),p)})]}))})),e.jsx("div",Object.assign({className:"flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out "+(B&&P?"max-h-screen bg-sidebar-submenu-background-default":"max-h-0 "),style:{backgroundColor:B&&P?w:"transparent"}},{children:x.map(((t,a)=>e.jsx("button",Object.assign({onClick:()=>M(t),className:u.twMerge("\n flex flex-1 py-2 \n bg-sidebar-submenu-background-default active:bg-sidebar-submenu-background-active hover:bg-sidebar-submenu-background-hover \n text-sidebar-submenu-textAndIcon-default active:text-sidebar-submenu-textAndIcon-active hover:text-sidebar-submenu-textAndIcon-hover \n pl-8 "+(t.navLink===b?`pl-11 ${C||"text-sidebar-submenu-textAndIcon-active"}`:""),y),style:{color:t.navLink===b?S:void 0}},{children:e.jsx(n.default,{label:t.title,className:`text-xs text-left line-clamp-1 w-full ${t.navLink===b?"font-semibold":"font-normal"} `})}),a)))}))]}))},b=({activeId:t,activeParent:s,data:n,isCollapsed:o,notificationCountContainerStyles:i,notificationCountTextStyles:r,containerStyles:d,itemMenuContainerStyles:x,itemMenuIconStyles:b,itemMenuTitleStyles:f,itemMenuActiveBgColor:p,itemSubMenuContainerStyles:j,itemSubMenuActiveTextColor:h,toggleButtonContainerStyles:v,toggleIconOpenName:w,toggleIconCloseName:y,toggleIconStyles:C,onClickCollapsible:S,onClickNav:k,children:N})=>{const M=c.getChildrenOnDisplayName(N,"Header"),A=c.getChildrenOnDisplayName(N,"Footer"),B=c.getChildrenOnDisplayName(N,"UserProfile"),[P,q]=m.default.useState(s),O=a.Children.toArray(N);return e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col relative h-full px-2 pb-2 ease-in-out duration-300 w-[220px] bg-sidebar-background-default",d)},{children:[M,e.jsx(l.default,{variant:"tertiary",onClick:()=>S(),iconName:o?y||"chevronDoubleArrowRight":w||"chevronDoubleArrowLeft",iconStyles:u.twMerge("w-[7.5px] h-[7.5px]",C),className:u.twMerge("w-6 h-6 absolute top-14 -right-3",v)}),e.jsx("div",Object.assign({className:"flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none"},{children:e.jsx("div",Object.assign({className:"flex flex-col justify-start flex-1"},{children:n.map(((a,s)=>e.jsx(g,{selectedId:P,id:a.id,title:a.title,icon:a.icon,permission:a.permission,isCollapsed:o,activeId:t,subMenu:a.subMenu,onClickCollapsible:()=>S(),onExpand:e=>q(e),onClickNav:e=>k(e),notifcationCount:a.notifcationCount,notificationCountContainerStyles:i,notificationCountTextStyles:r,itemMenuActiveBgColor:p,itemMenuContainerStyles:x,itemSubMenuActiveTextColor:h,itemSubMenuContainerStyles:j,iconStyles:b,titleStyles:f},s)))}))})),e.jsx("div",Object.assign({className:"mb-2"},{children:a.Children.map(O,((t,a)=>{const s=c.getChildrenOnDisplayName(t,"Popover");return e.jsx("div",Object.assign({className:"w-full"},{children:s}),a)}))})),B,A]}))},f=({isCollapsed:o,label:l,labelStyles:d,icon:x,iconStyles:g,notificationCount:b,notificationCountContainerStyles:f,notificationCountTextStyles:p,position:j,iconTriangleStyles:h,iconTriangleContainerStyles:v,panelContainerStyles:w,offsetX:y,offsetY:C,containerStyles:S,isAutoFlip:k,children:N})=>{const[M,A]=m.default.useState(!1),[B,P]=m.default.useState(!1),[q,O]=m.default.useState(!1);return a.useEffect((()=>{o?A(!1):setTimeout((()=>{A(!0)}),200)}),[o]),e.jsx(r,Object.assign({position:j||"right-start",iconTriangleStyles:h,iconTriangleContainerStyles:v,panelContainerStyles:w,offsetX:y,offsetY:C,isAutoFlip:k},{children:({open:a,close:o})=>e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{children:e.jsxs("button",Object.assign({className:u.twMerge(t.default("\n h-8 pr-4 pl-3 w-full relative flex flex-row items-center rounded-lg gap-x-2\n bg-sidebar-notificationButton-background-default active:bg-sidebar-notificationButton-background-active hover:bg-sidebar-notificationButton-background-hover\n text-sidebar-notificationButton-textAndIcon-default active:text-sidebar-notificationButton-textAndIcon-active hover:text-sidebar-notificationButton-textAndIcon-hover\n ",a&&"bg-sidebar-profile-background-active text-sidebar-profile-text-active"),S),onMouseDown:()=>O(!0),onMouseUp:()=>O(!1),onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(i,{name:x,className:u.twMerge(t.default("w-4 h-4 fill-sidebar-notificationButton-textAndIcon-default",B&&"fill-sidebar-notificationButton-textAndIcon-hover",q&&"fill-sidebar-notificationButton-textAndIcon-active"),g)})})),M&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:l,className:u.twMerge("text-sm text-left line-clamp-1 w-full",d)})})),!!b&&e.jsx(s,{label:b.toString(),labelStyles:u.twMerge("text-[10px] text-sidebar-notificationBadge-textAndIcon-default",p),containerStyles:u.twMerge(t.default("flex items-center justify-center bg-sidebar-notificationBadge-background-default min-w-[16px] h-4 rounded-full p-0.5",`${!M&&"absolute right-0 top-0"}`),f)})]}))}),e.jsx(r.Panel,{children:c.getChildrenOnDisplayName("function"==typeof N?N({open:a,close:o}):N,"PopoverPanel")})]})}))};f.displayName="Popover",b.Popover=f;const p=({children:t})=>e.jsx(e.Fragment,{children:t});p.displayName="PopoverPanel",b.PopoverPanel=p;const j=({isCollapsed:t,appLogoClosed:s,appLogoClosedStyles:n,appLogoOpened:o,appLogoOpenedStyles:l,containerStyles:i,onClickHeaderSidebar:r,children:c})=>{const[d,x]=m.default.useState(!1);return a.useEffect((()=>{t?x(!1):setTimeout((()=>{x(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:c||e.jsx("div",Object.assign({className:u.twMerge("flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer",i),onClick:()=>null==r?void 0:r()},{children:d?e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx("img",{src:o||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg",className:u.twMerge("w-[113px] h-7",l)})})):e.jsx("img",{src:s||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:u.twMerge("w-[22px] h-[22px]",n)})}))})};j.displayName="Header",b.Header=j;const h=({isCollapsed:s,userLabel:o,userLabelStyles:l,userAvatar:c,userAvatarFallback:d,userAvatarFallbackStyles:g,userAvatarStyles:b,containerStyles:f,panelContainerStyles:p,titleAtPanel:j,titleAtPanelStyles:h,userAvatarAtPanel:v,userAvatarAtPanelStyles:w,userAvatarFallbackAtPanel:y,userAvatarFallbackAtPanelStyles:C,userLabelAtPanel:S,userLabelAtPanelStyles:k,userEmailAtPanel:N,userEmailAtPanelStyles:M,manageAccountLabelAtPanel:A,manageAccountLabelAtPanelStyles:B,iconManageAccountAtPanel:P,iconManageAccountAtPanelStyles:q,onClickManageAccount:O,manageAccountContainerStyles:T,translationLabelAtPanel:I,translationLabelAtPanelStyles:L,iconTranslationAtPanel:F,iconTranslationAtPanelStyles:D,onClickTranslation:E,translationContainerStyles:H,logoutLabelAtPanel:R,logoutLabelAtPanelStyles:U,iconLogoutAtPanel:z,iconLogoutAtPanelStyles:G,onClickLogout:V,children:$,offsetX:_,offsetY:X,position:Y,isAutoFlip:J})=>{const[K,Q]=m.default.useState(!1);return a.useEffect((()=>{s?Q(!1):setTimeout((()=>{Q(!0)}),200)}),[s]),e.jsx(e.Fragment,{children:$||e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col w-full")},{children:[e.jsx(x,{}),e.jsx("div",Object.assign({className:"relative min-h-[56px] flex items-center w-full"},{children:e.jsx(r,Object.assign({offsetX:_,offsetY:X,isAutoFlip:J,panelContainerStyles:p,containerStyles:"w-full",position:Y},{children:({open:a,close:s})=>e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{children:e.jsxs("div",Object.assign({className:u.twMerge(t.default("\n w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg \n bg-sidebar-profile-background-default active:bg-sidebar-profile-background-active hover:bg-sidebar-profile-background-hover \n text-sidebar-profile-text-default active:text-sidebar-profile-text-active hover:text-sidebar-profile-text-hover\n cursor-pointer\n ",a&&"bg-sidebar-profile-background-active text-sidebar-profile-text-active"),f)},{children:[c?e.jsx("img",{src:c||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:u.twMerge("w-6 h-6 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover",b)}):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx(n.default,{label:d,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",g)})})),K&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:o||"",className:u.twMerge("line-clamp-1 w-full text-left",l)})}))]}))}),e.jsx(r.Panel,{children:e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]",p)},{children:[e.jsx("div",Object.assign({className:"px-4"},{children:e.jsx(n.default,{label:j||"Account",className:u.twMerge("text-sm font-semibold text-dark-blackCoral",h)})})),e.jsxs("div",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-2"},{children:[v?e.jsx("img",{src:v||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:u.twMerge("w-8 h-8 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover",w)}):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-8 h-8 bg-sidebar-avatar-background-default rounded",w)},{children:e.jsx(n.default,{label:y,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",C)})})),e.jsxs("div",Object.assign({className:"flex flex-col"},{children:[e.jsx(n.default,{label:S||"",className:u.twMerge("w-full line-clamp-1 font-normal text-sm text-dark-blackCoral",k)}),e.jsx(n.default,{label:N||"",className:u.twMerge("w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo",M)})]}))]})),e.jsxs("button",Object.assign({className:u.twMerge("flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent",T),onClick:()=>{s(),null==O||O()}},{children:[e.jsx(i,{name:P||"configuration",className:u.twMerge("w-4 h-4 fill-dark-gumbo",q)}),e.jsx(n.default,{label:A||"Manage Account",className:u.twMerge("text-sm font-normal text-dark-blackCoral",B)})]})),e.jsxs("button",Object.assign({className:u.twMerge("flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent",H),onClick:()=>{s(),null==E||E()}},{children:[e.jsx(i,{name:F||"language",className:u.twMerge("w-4 h-4 fill-dark-gumbo",D)}),e.jsx(n.default,{label:I||"Translate Page",className:u.twMerge("text-sm font-normal text-dark-blackCoral",L)})]})),e.jsx("div",{className:"h-[1px] w-full bg-dark-silver"}),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent",onClick:()=>{s(),null==V||V()}},{children:[e.jsx(i,{name:z||"logout",className:u.twMerge("w-4 h-4 fill-dark-gumbo",G)}),e.jsx(n.default,{label:R||"Logout",className:u.twMerge("text-sm font-normal text-dark-blackCoral",U)})]}))]}))})]})}))})),e.jsx(x,{})]}))})};h.displayName="UserProfile",b.UserProfile=h;const v=({isCollapsed:s,isShowCompanyProfile:l,companyName:i,companyNameStyles:r,companyLogo:c,companyLogoStyles:d,companyLogoFallback:x,companlogoFallbackStyles:g,companyLogoContainerStyles:b,isShowButtonChangeCompany:f,buttonChangeCompanyOnClick:p,buttonChangeCompanyLabel:j,buttonChangeCompanyStyles:h,buttonChangeCompanyIconName:v,buttonChangeCompanyIconStyles:w,appName:y,appVersion:C,children:S})=>{const[k,N]=m.default.useState(!1);return a.useEffect((()=>{s?N(!1):setTimeout((()=>{N(!0)}),200)}),[s]),e.jsx(e.Fragment,{children:S||e.jsxs("div",Object.assign({className:"pt-2 px-2"},{children:[l&&e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[c?e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx("img",{src:c||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:u.twMerge("w-4 h-4",d)})})):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx(n.default,{label:x,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",g)})})),k&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:i||"Gajicermat",className:u.twMerge("text-sidebar-companyNameText-default text-xs line-clamp-2",r)})}))]})),f&&e.jsx("div",Object.assign({className:"h-14 w-full flex flex-row items-center"},{children:e.jsx(o.default,{variant:"secondary",onClick:()=>null==p?void 0:p(),label:k?j||"Select Company":"",className:u.twMerge(t.default("flex items-center justify-center p-0 h-6 ml-0",k?"w-full":"w-6"),h),rightIcon:k?void 0:v||"refresh",rightIconStyles:u.twMerge("ml-0 w-3 h-3",w)})})),e.jsx("div",Object.assign({className:"flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full"},{children:k?e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:y||"© Gajicermat Digital Mandiri",className:"text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-right font-normal"})})),e.jsx("div",{className:"w-[1px] h-3 bg-sidebar-appVersionText-default"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:C||"Version 0.0.0",className:"text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-left font-normal"})}))]}):e.jsx("div",{className:"w-[1px] h-3 "})}))]}))})};v.displayName="Footer",b.Footer=v,module.exports=b;
|
|
2
2
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../../src/blocks/Sidebar/Sidebar.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-identical-functions */\nimport classNames from 'classnames';\nimport React, { Children, useEffect } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport {\n BaseBadge,\n BaseButton,\n BaseButtonIcon,\n BasePopover,\n BaseText,\n Icon\n} from '../../components';\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport {\n SidebarFooterInterface,\n SidebarHeaderInterface,\n SidebarInterface,\n SidebarMenuExtendedInterface,\n SidebarMenuInterface,\n SidebarPopoverInterface,\n SidebarUserProfileInterface\n} from './Sidebar.type';\n\nconst Divider = () => <div className='w-full h-[1px] bg-sidebar-separator-default' />;\n\n// TODO: tidy up interface\nconst SidebarMenu = ({\n id,\n title,\n titleStyles,\n icon,\n iconStyles,\n subMenu,\n isCollapsed,\n activeId,\n selectedId,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n itemMenuContainerStyles,\n itemMenuActiveContainerStyles,\n itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\n itemSubMenuActiveContainerStyles,\n itemSubMenuActiveTextColor,\n onClickCollapsible,\n onExpand,\n onClickNav,\n notifcationCount\n}: SidebarMenuInterface & SidebarMenuExtendedInterface) => {\n const expanded = selectedId === id;\n const [isShow, setIsShow] = React.useState<boolean>(false);\n const [isMenuMouseEnter, setIsMenuMouseEnter] = React.useState<boolean>(false);\n const [isMenuMouseDown, setIsMenuMouseDown] = React.useState<boolean>(false);\n\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <div\n className={twMerge(\n `overflow-hidden hover:bg-sidebar-menu-background-hover rounded-lg ${\n expanded\n ? itemMenuActiveContainerStyles || 'bg-sidebar-menu-background-active'\n : 'bg-transparent'\n }`,\n itemMenuContainerStyles\n )}\n style={{ backgroundColor: expanded ? itemMenuActiveBgColor : undefined }}\n >\n <button\n onClick={() => {\n if (!isShow && !expanded) onClickCollapsible();\n\n if (expanded) {\n onExpand('');\n return;\n }\n\n onExpand(id);\n }}\n className='h-8 pr-4 pl-3 w-full bg-transparent relative'\n onMouseDown={() => setIsMenuMouseDown(true)}\n onMouseUp={() => setIsMenuMouseDown(false)}\n onMouseEnter={() => setIsMenuMouseEnter(true)}\n onMouseLeave={() => setIsMenuMouseEnter(false)}\n >\n <div className='flex flex-row items-center gap-x-2'>\n <div className='w-4 h-4'>\n <Icon\n name={icon}\n className={twMerge(\n classNames(\n 'w-4 h-4 fill-sidebar-menu-textAndIcon-default',\n isMenuMouseEnter && 'fill-sidebar-menu-textAndIcon-hover',\n isMenuMouseDown && 'fill-sidebar-menu-textAndIcon-active'\n ),\n iconStyles\n )}\n />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={title}\n className={twMerge(\n classNames(\n 'text-sidebar-menu-textAndIcon-default text-sm text-left line-clamp-1 w-full',\n isMenuMouseEnter && 'text-sidebar-menu-textAndIcon-hover',\n isMenuMouseDown && 'text-sidebar-menu-textAndIcon-active'\n ),\n titleStyles\n )}\n />\n </div>\n )}\n {!!notifcationCount && (\n <BaseBadge\n label={notifcationCount.toString()}\n labelStyles={twMerge(\n 'text-[10px] text-sidebar-notificationBadge-textAndIcon-default',\n notificationCountTextStyles\n )}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center min-w-[16px] h-4 rounded-full p-0.5 bg-sidebar-notificationBadge-background-default',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </div>\n </button>\n\n <div\n className={`flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out ${\n expanded && isShow ? 'max-h-screen bg-sidebar-submenu-background-default' : 'max-h-0 '\n }`}\n style={{ backgroundColor: expanded && isShow ? itemMenuActiveBgColor : 'transparent' }}\n >\n {subMenu.map((item, index) => (\n <button\n key={index}\n onClick={() => onClickNav(item)}\n className={twMerge(\n `\n flex flex-1 py-2 \n bg-sidebar-submenu-background-default active:bg-sidebar-submenu-background-active hover:bg-sidebar-submenu-background-hover \n text-sidebar-submenu-textAndIcon-default active:text-sidebar-submenu-textAndIcon-active hover:text-sidebar-submenu-textAndIcon-hover \n pl-8 ${\n item.navLink === activeId\n ? `pl-11 ${\n itemSubMenuActiveContainerStyles || 'text-sidebar-submenu-textAndIcon-active'\n }`\n : ''\n }`,\n itemSubMenuContainerStyles\n )}\n style={{ color: item.navLink === activeId ? itemSubMenuActiveTextColor : undefined }}\n >\n <BaseText\n label={item.title}\n className={`text-xs text-left line-clamp-1 w-full ${\n item.navLink === activeId ? 'font-semibold' : 'font-normal'\n } `}\n />\n </button>\n ))}\n </div>\n </div>\n );\n};\n\nconst Sidebar = ({\n activeId,\n activeParent,\n data,\n isCollapsed,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n containerStyles,\n itemMenuContainerStyles,\n itemMenuIconStyles,\n itemMenuTitleStyles,\n itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\n itemSubMenuActiveTextColor,\n toggleButtonContainerStyles,\n toggleIconOpenName,\n toggleIconCloseName,\n toggleIconStyles,\n onClickCollapsible,\n onClickNav,\n children\n}: SidebarInterface) => {\n const header = getChildrenOnDisplayName(children, 'Header');\n const footer = getChildrenOnDisplayName(children, 'Footer');\n const userProfile = getChildrenOnDisplayName(children, 'UserProfile');\n\n const [selectedId, setSelectedId] = React.useState<string>(activeParent);\n\n const arrayChildren = Children.toArray(children);\n\n return (\n <div\n className={twMerge(\n 'flex flex-col relative h-full px-2 pb-2 ease-in-out duration-300 w-[220px] bg-sidebar-background-default',\n containerStyles\n )}\n >\n {/* Header */}\n {header}\n\n <BaseButtonIcon\n variant='tertiary'\n onClick={() => onClickCollapsible()}\n iconName={\n isCollapsed\n ? toggleIconCloseName || 'chevronDoubleArrowRight'\n : toggleIconOpenName || 'chevronDoubleArrowLeft'\n }\n iconStyles={twMerge('w-[7.5px] h-[7.5px]', toggleIconStyles)}\n className={twMerge('w-6 h-6 absolute top-14 -right-3', toggleButtonContainerStyles)}\n />\n\n {/* Content */}\n <div className='flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none'>\n <div className='flex flex-col justify-start flex-1'>\n {data.map((item, index) => (\n <SidebarMenu\n key={index}\n selectedId={selectedId}\n id={item.id}\n title={item.title}\n icon={item.icon}\n permission={item.permission}\n isCollapsed={isCollapsed}\n activeId={activeId}\n subMenu={item.subMenu}\n onClickCollapsible={() => onClickCollapsible()}\n onExpand={(id) => setSelectedId(id)}\n onClickNav={(navLink) => onClickNav(navLink)}\n notifcationCount={item.notifcationCount}\n notificationCountContainerStyles={notificationCountContainerStyles}\n notificationCountTextStyles={notificationCountTextStyles}\n itemMenuActiveBgColor={itemMenuActiveBgColor}\n itemMenuContainerStyles={itemMenuContainerStyles}\n itemSubMenuActiveTextColor={itemSubMenuActiveTextColor}\n itemSubMenuContainerStyles={itemSubMenuContainerStyles}\n iconStyles={itemMenuIconStyles}\n titleStyles={itemMenuTitleStyles}\n />\n ))}\n </div>\n </div>\n\n <div className='mb-2'>\n {Children.map(arrayChildren, (item, index) => {\n const child = getChildrenOnDisplayName(item, 'Popover');\n return (\n <div key={index} className='w-full'>\n {child}\n </div>\n );\n })}\n </div>\n\n {/* User */}\n {userProfile}\n\n {/* Company */}\n {footer}\n </div>\n );\n};\n\nconst Popover = ({\n isCollapsed,\n label,\n labelStyles,\n icon,\n iconStyles,\n notificationCount,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n position,\n iconTriangleStyles,\n iconTriangleContainerStyles,\n panelContainerStyles,\n offsetX,\n offsetY,\n containerStyles,\n isAutoFlip,\n children\n}: SidebarPopoverInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n const [isMouseEnter, setIsMouseEnter] = React.useState<boolean>(false);\n const [isMouseDown, setIsMouseDown] = React.useState<boolean>(false);\n\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <BasePopover\n position={position || 'right-start'}\n iconTriangleStyles={iconTriangleStyles}\n iconTriangleContainerStyles={iconTriangleContainerStyles}\n panelContainerStyles={panelContainerStyles}\n offsetX={offsetX}\n offsetY={offsetY}\n isAutoFlip={isAutoFlip}\n >\n {({ open, close }) => {\n return (\n <>\n <BasePopover.Button>\n <button\n className={twMerge(\n classNames(\n `\n h-8 pr-4 pl-3 w-full relative flex flex-row items-center rounded-lg gap-x-2\n bg-sidebar-notificationButton-background-default active:bg-sidebar-notificationButton-background-active hover:bg-sidebar-notificationButton-background-hover\n text-sidebar-notificationButton-textAndIcon-default active:text-sidebar-notificationButton-textAndIcon-active hover:text-sidebar-notificationButton-textAndIcon-hover\n `,\n open && 'bg-sidebar-profile-background-active text-sidebar-profile-text-active'\n ),\n containerStyles\n )}\n onMouseDown={() => setIsMouseDown(true)}\n onMouseUp={() => setIsMouseDown(false)}\n onMouseEnter={() => setIsMouseEnter(true)}\n onMouseLeave={() => setIsMouseEnter(false)}\n >\n <div className='w-4 h-4'>\n <Icon\n name={icon}\n className={twMerge(\n classNames(\n 'w-4 h-4 fill-sidebar-notificationButton-textAndIcon-default',\n isMouseEnter && 'fill-sidebar-notificationButton-textAndIcon-hover',\n isMouseDown && 'fill-sidebar-notificationButton-textAndIcon-active'\n ),\n iconStyles\n )}\n />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={label}\n className={twMerge('text-sm text-left line-clamp-1 w-full', labelStyles)}\n />\n </div>\n )}\n {!!notificationCount && (\n <BaseBadge\n label={notificationCount.toString()}\n labelStyles={twMerge(\n 'text-[10px] text-sidebar-notificationBadge-textAndIcon-default',\n notificationCountTextStyles\n )}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center bg-sidebar-notificationBadge-background-default min-w-[16px] h-4 rounded-full p-0.5',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </button>\n </BasePopover.Button>\n <BasePopover.Panel>\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'PopoverPanel'\n )}\n </BasePopover.Panel>\n </>\n );\n }}\n </BasePopover>\n );\n};\nPopover.displayName = 'Popover';\nSidebar.Popover = Popover;\n\nconst PopoverPanel = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>;\n};\nPopoverPanel.displayName = 'PopoverPanel';\nSidebar.PopoverPanel = PopoverPanel;\n\nconst Header = ({\n isCollapsed,\n appLogoClosed,\n appLogoClosedStyles,\n appLogoOpened,\n appLogoOpenedStyles,\n containerStyles,\n onClickHeaderSidebar,\n children\n}: SidebarHeaderInterface) => {\n // TODO: create hooks for code below\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div\n className={twMerge(\n 'flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer',\n containerStyles\n )}\n onClick={() => onClickHeaderSidebar?.()}\n >\n {isShow ? (\n <div className='flex flex-1'>\n <img\n src={\n appLogoOpened ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg'\n }\n className={twMerge('w-[113px] h-7', appLogoOpenedStyles)}\n />\n </div>\n ) : (\n <img\n src={\n appLogoClosed ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n }\n className={twMerge('w-[22px] h-[22px]', appLogoClosedStyles)}\n />\n )}\n </div>\n )}\n </>\n );\n};\nHeader.displayName = 'Header';\nSidebar.Header = Header;\n\nconst UserProfile = ({\n isCollapsed,\n userLabel,\n userLabelStyles,\n userAvatar,\n userAvatarFallback,\n userAvatarFallbackStyles,\n userAvatarStyles,\n containerStyles,\n // Panel\n panelContainerStyles,\n titleAtPanel,\n titleAtPanelStyles,\n userAvatarAtPanel,\n userAvatarAtPanelStyles,\n userAvatarFallbackAtPanel,\n userAvatarFallbackAtPanelStyles,\n userLabelAtPanel,\n userLabelAtPanelStyles,\n userEmailAtPanel,\n userEmailAtPanelStyles,\n manageAccountLabelAtPanel,\n manageAccountLabelAtPanelStyles,\n iconManageAccountAtPanel,\n iconManageAccountAtPanelStyles,\n onClickManageAccount,\n manageAccountContainerStyles,\n translationLabelAtPanel,\n translationLabelAtPanelStyles,\n iconTranslationAtPanel,\n iconTranslationAtPanelStyles,\n onClickTranslation,\n translationContainerStyles,\n logoutLabelAtPanel,\n logoutLabelAtPanelStyles,\n iconLogoutAtPanel,\n iconLogoutAtPanelStyles,\n onClickLogout,\n children,\n offsetX,\n offsetY,\n position,\n isAutoFlip\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarUserProfileInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div className={twMerge('flex flex-col w-full')}>\n <Divider />\n <div className='relative min-h-[56px] flex items-center w-full'>\n <BasePopover\n offsetX={offsetX}\n offsetY={offsetY}\n isAutoFlip={isAutoFlip}\n panelContainerStyles={panelContainerStyles}\n containerStyles='w-full'\n position={position}\n >\n {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n {({ open, close }) => {\n return (\n <>\n <BasePopover.Button>\n <div\n className={twMerge(\n classNames(\n `\n w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg \n bg-sidebar-profile-background-default active:bg-sidebar-profile-background-active hover:bg-sidebar-profile-background-hover \n text-sidebar-profile-text-default active:text-sidebar-profile-text-active hover:text-sidebar-profile-text-hover\n cursor-pointer\n `,\n open &&\n 'bg-sidebar-profile-background-active text-sidebar-profile-text-active'\n ),\n containerStyles\n )}\n >\n {userAvatar ? (\n <img\n src={\n userAvatar ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n }\n className={twMerge(\n 'w-6 h-6 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover',\n userAvatarStyles\n )}\n />\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n userAvatarStyles\n )}\n >\n <BaseText\n label={userAvatarFallback}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n userAvatarFallbackStyles\n )}\n />\n </div>\n )}\n\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={userLabel || ''}\n className={twMerge('line-clamp-1 w-full text-left', userLabelStyles)}\n />\n </div>\n )}\n </div>\n </BasePopover.Button>\n <BasePopover.Panel>\n <div\n className={twMerge(\n 'flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]',\n panelContainerStyles\n )}\n >\n <div className='px-4'>\n <BaseText\n label={titleAtPanel || 'Account'}\n className={twMerge(\n 'text-sm font-semibold text-dark-blackCoral',\n titleAtPanelStyles\n )}\n />\n </div>\n <div className='flex flex-row items-center px-4 gap-x-2 mt-2'>\n {userAvatarAtPanel ? (\n <img\n src={\n userAvatarAtPanel ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n }\n className={twMerge(\n 'w-8 h-8 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover',\n userAvatarAtPanelStyles\n )}\n />\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-8 h-8 bg-sidebar-avatar-background-default rounded',\n userAvatarAtPanelStyles\n )}\n >\n <BaseText\n label={userAvatarFallbackAtPanel}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n userAvatarFallbackAtPanelStyles\n )}\n />\n </div>\n )}\n\n <div className='flex flex-col'>\n <BaseText\n label={userLabelAtPanel || ''}\n className={twMerge(\n 'w-full line-clamp-1 font-normal text-sm text-dark-blackCoral',\n userLabelAtPanelStyles\n )}\n />\n <BaseText\n label={userEmailAtPanel || ''}\n className={twMerge(\n 'w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo',\n userEmailAtPanelStyles\n )}\n />\n </div>\n </div>\n <button\n className={twMerge(\n 'flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent',\n manageAccountContainerStyles\n )}\n onClick={() => {\n close();\n onClickManageAccount?.();\n }}\n >\n <Icon\n name={iconManageAccountAtPanel || 'configuration'}\n className={twMerge(\n 'w-4 h-4 fill-dark-gumbo',\n iconManageAccountAtPanelStyles\n )}\n />\n <BaseText\n label={manageAccountLabelAtPanel || 'Manage Account'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n manageAccountLabelAtPanelStyles\n )}\n />\n </button>\n <button\n className={twMerge(\n 'flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent',\n translationContainerStyles\n )}\n onClick={() => {\n close();\n onClickTranslation?.();\n }}\n >\n <Icon\n name={iconTranslationAtPanel || 'language'}\n className={twMerge(\n 'w-4 h-4 fill-dark-gumbo',\n iconTranslationAtPanelStyles\n )}\n />\n <BaseText\n label={translationLabelAtPanel || 'Translate Page'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n translationLabelAtPanelStyles\n )}\n />\n </button>\n <div className='h-[1px] w-full bg-dark-silver' />\n <button\n className='flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent'\n onClick={() => {\n close();\n onClickLogout?.();\n }}\n >\n <Icon\n name={iconLogoutAtPanel || 'logout'}\n className={twMerge('w-4 h-4 fill-dark-gumbo', iconLogoutAtPanelStyles)}\n />\n <BaseText\n label={logoutLabelAtPanel || 'Logout'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n logoutLabelAtPanelStyles\n )}\n />\n </button>\n </div>\n </BasePopover.Panel>\n </>\n );\n }}\n </BasePopover>\n </div>\n <Divider />\n </div>\n )}\n </>\n );\n};\nUserProfile.displayName = 'UserProfile';\nSidebar.UserProfile = UserProfile;\n\nconst Footer = ({\n isCollapsed,\n isShowCompanyProfile,\n companyName,\n companyNameStyles,\n companyLogo,\n companyLogoStyles,\n companyLogoFallback,\n companlogoFallbackStyles,\n companyLogoContainerStyles,\n isShowButtonChangeCompany,\n buttonChangeCompanyOnClick,\n buttonChangeCompanyLabel,\n buttonChangeCompanyStyles,\n buttonChangeCompanyIconName,\n buttonChangeCompanyIconStyles,\n appName,\n appVersion,\n children\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarFooterInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div className='pt-2 px-2'>\n {isShowCompanyProfile && (\n <div className='flex flex-row items-center gap-x-2'>\n {companyLogo ? (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n companyLogoContainerStyles\n )}\n >\n <img\n src={\n companyLogo ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n }\n className={twMerge('w-4 h-4', companyLogoStyles)}\n />\n </div>\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n companyLogoContainerStyles\n )}\n >\n <BaseText\n label={companyLogoFallback}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n companlogoFallbackStyles\n )}\n />\n </div>\n )}\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={companyName || 'Gajicermat'}\n className={twMerge(\n 'text-sidebar-companyNameText-default text-xs line-clamp-2',\n companyNameStyles\n )}\n />\n </div>\n )}\n </div>\n )}\n\n {isShowButtonChangeCompany && (\n <div className='h-14 w-full flex flex-row items-center'>\n <BaseButton\n variant='secondary'\n onClick={() => buttonChangeCompanyOnClick?.()}\n label={isShow ? buttonChangeCompanyLabel || 'Select Company' : ''}\n className={twMerge(\n classNames(\n 'flex items-center justify-center p-0 h-6 ml-0',\n isShow ? 'w-full' : 'w-6'\n ),\n buttonChangeCompanyStyles\n )}\n rightIcon={isShow ? undefined : buttonChangeCompanyIconName || 'refresh'}\n rightIconStyles={twMerge('ml-0 w-3 h-3', buttonChangeCompanyIconStyles)}\n />\n </div>\n )}\n\n <div className='flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full'>\n {isShow ? (\n <>\n <div className='flex flex-1'>\n <BaseText\n label={appName || '© Gajicermat Digital Mandiri'}\n className='text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-right font-normal'\n />\n </div>\n <div className='w-[1px] h-3 bg-sidebar-appVersionText-default' />\n <div className='flex flex-1'>\n <BaseText\n label={appVersion || 'Version 0.0.0'}\n className='text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-left font-normal'\n />\n </div>\n </>\n ) : (\n <div className='w-[1px] h-3 ' />\n )}\n </div>\n </div>\n )}\n </>\n );\n};\nFooter.displayName = 'Footer';\nSidebar.Footer = Footer;\n\nexport default Sidebar;\n"],"names":["Divider","_jsx","className","SidebarMenu","id","title","titleStyles","icon","iconStyles","subMenu","isCollapsed","activeId","selectedId","notificationCountContainerStyles","notificationCountTextStyles","itemMenuContainerStyles","itemMenuActiveContainerStyles","itemMenuActiveBgColor","itemSubMenuContainerStyles","itemSubMenuActiveContainerStyles","itemSubMenuActiveTextColor","onClickCollapsible","onExpand","onClickNav","notifcationCount","expanded","isShow","setIsShow","React","useState","isMenuMouseEnter","setIsMenuMouseEnter","isMenuMouseDown","setIsMenuMouseDown","useEffect","setTimeout","_jsxs","jsxs","Object","assign","twMerge","style","backgroundColor","undefined","children","onClick","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","jsx","Icon","name","classNames","BaseText","label","BaseBadge","toString","labelStyles","containerStyles","map","item","index","navLink","color","Sidebar","activeParent","data","itemMenuIconStyles","itemMenuTitleStyles","toggleButtonContainerStyles","toggleIconOpenName","toggleIconCloseName","toggleIconStyles","header","getChildrenOnDisplayName","footer","userProfile","setSelectedId","arrayChildren","Children","toArray","BaseButtonIcon","variant","iconName","permission","child","Popover","notificationCount","position","iconTriangleStyles","iconTriangleContainerStyles","panelContainerStyles","offsetX","offsetY","isAutoFlip","isMouseEnter","setIsMouseEnter","isMouseDown","setIsMouseDown","BasePopover","open","close","_Fragment","Button","Panel","displayName","PopoverPanel","Fragment","Header","appLogoClosed","appLogoClosedStyles","appLogoOpened","appLogoOpenedStyles","onClickHeaderSidebar","src","UserProfile","userLabel","userLabelStyles","userAvatar","userAvatarFallback","userAvatarFallbackStyles","userAvatarStyles","titleAtPanel","titleAtPanelStyles","userAvatarAtPanel","userAvatarAtPanelStyles","userAvatarFallbackAtPanel","userAvatarFallbackAtPanelStyles","userLabelAtPanel","userLabelAtPanelStyles","userEmailAtPanel","userEmailAtPanelStyles","manageAccountLabelAtPanel","manageAccountLabelAtPanelStyles","iconManageAccountAtPanel","iconManageAccountAtPanelStyles","onClickManageAccount","manageAccountContainerStyles","translationLabelAtPanel","translationLabelAtPanelStyles","iconTranslationAtPanel","iconTranslationAtPanelStyles","onClickTranslation","translationContainerStyles","logoutLabelAtPanel","logoutLabelAtPanelStyles","iconLogoutAtPanel","iconLogoutAtPanelStyles","onClickLogout","Footer","isShowCompanyProfile","companyName","companyNameStyles","companyLogo","companyLogoStyles","companyLogoFallback","companlogoFallbackStyles","companyLogoContainerStyles","isShowButtonChangeCompany","buttonChangeCompanyOnClick","buttonChangeCompanyLabel","buttonChangeCompanyStyles","buttonChangeCompanyIconName","buttonChangeCompanyIconStyles","appName","appVersion","BaseButton","rightIcon","rightIconStyles"],"mappings":"i5FAwBA,MAAMA,EAAU,IAAMC,EAAAA,WAAKC,UAAU,gDAG/BC,EAAc,EAClBC,KACAC,QACAC,cACAC,OACAC,aACAC,UACAC,cACAC,WACAC,aACAC,mCACAC,8BACAC,0BACAC,gCACAC,wBACAC,6BACAC,mCACAC,6BACAC,qBACAC,WACAC,aACAC,uBAEA,MAAMC,EAAWb,IAAeR,GACzBsB,EAAQC,GAAaC,EAAAA,QAAMC,UAAkB,IAC7CC,EAAkBC,GAAuBH,EAAAA,QAAMC,UAAkB,IACjEG,EAAiBC,GAAsBL,EAAAA,QAAMC,UAAkB,GAYtE,OAVAK,EAAAA,WAAU,KACHxB,EAKHiB,GAAU,GAJVQ,YAAW,KACTR,GAAU,EAAK,GACd,IAGJ,GACA,CAACjB,IAGF0B,EACEC,KAAA,MAAAC,OAAAC,OAAA,CAAArC,UAAWsC,EAAAA,QACT,qEACEf,EACIT,GAAiC,oCACjC,mBAEND,GAEF0B,MAAO,CAAEC,gBAAiBjB,EAAWR,OAAwB0B,IAAW,CAAAC,SAAA,CAExE3C,MACE,SAAAqC,OAAAC,OAAA,CAAAM,QAAS,KACFnB,GAAWD,GAAUJ,IAGxBC,EADEG,EACO,GAIFrB,EAAG,EAEdF,UAAU,+CACV4C,YAAa,IAAMb,GAAmB,GACtCc,UAAW,IAAMd,GAAmB,GACpCe,aAAc,IAAMjB,GAAoB,GACxCkB,aAAc,IAAMlB,GAAoB,IAExC,CAAAa,SAAAR,OAAA,MAAAE,OAAAC,OAAA,CAAKrC,UAAU,sCAAoC,CAAA0C,SAAA,CACjD3C,MAAK,MAAAqC,OAAAC,OAAA,CAAArC,UAAU,WACb,CAAA0C,SAAA3C,EAAAiD,IAACC,EACC,CAAAC,KAAM7C,EACNL,UAAWsC,UACTa,EAAAA,QACE,gDACAvB,GAAoB,sCACpBE,GAAmB,wCAErBxB,QAILkB,GACCzB,EAAAA,IAAA,MAAAqC,OAAAC,OAAA,CAAKrC,UAAU,eAAa,CAAA0C,SAC1B3C,EAACiD,IAAAI,EAAQ,QACP,CAAAC,MAAOlD,EACPH,UAAWsC,EAAAA,QACTa,EAAAA,QACE,8EACAvB,GAAoB,sCACpBE,GAAmB,wCAErB1B,UAKLkB,GACDvB,EAACiD,IAAAM,GACCD,MAAO/B,EAAiBiC,WACxBC,YAAalB,EAAAA,QACX,iEACA1B,GAEF6C,gBAAiBnB,EAAAA,QACfa,EAAAA,QACE,uHACA,IAAI3B,GAAU,4BAEhBb,YAOVZ,EACEiD,IAAA,MAAAZ,OAAAC,OAAA,CAAArC,UAAW,mFACTuB,GAAYC,EAAS,qDAAuD,YAE9Ee,MAAO,CAAEC,gBAAiBjB,GAAYC,EAAST,EAAwB,gBAEtE,CAAA2B,SAAAnC,EAAQmD,KAAI,CAACC,EAAMC,IAClB7D,EAAAA,IAAA,SAAAqC,OAAAC,OAAA,CAEEM,QAAS,IAAMtB,EAAWsC,GAC1B3D,UAAWsC,EAAAA,QACT,2VAKEqB,EAAKE,UAAYpD,EACb,SACEQ,GAAoC,4CAEtC,IAEND,GAEFuB,MAAO,CAAEuB,MAAOH,EAAKE,UAAYpD,EAAWS,OAA6BuB,IAEzE,CAAAC,SAAA3C,MAACqD,EAAAA,QACC,CAAAC,MAAOM,EAAKxD,MACZH,UAAW,yCACT2D,EAAKE,UAAYpD,EAAW,gBAAkB,qBArB7CmD,WA4Bb,EAGEG,EAAU,EACdtD,WACAuD,eACAC,OACAzD,cACAG,mCACAC,8BACA6C,kBACA5C,0BACAqD,qBACAC,sBACApD,wBACAC,6BACAE,6BACAkD,8BACAC,qBACAC,sBACAC,mBACApD,qBACAE,aACAqB,eAEA,MAAM8B,EAASC,EAAAA,yBAAyB/B,EAAU,UAC5CgC,EAASD,EAAAA,yBAAyB/B,EAAU,UAC5CiC,EAAcF,EAAAA,yBAAyB/B,EAAU,gBAEhDhC,EAAYkE,GAAiBlD,EAAAA,QAAMC,SAAiBqC,GAErDa,EAAgBC,EAAAA,SAASC,QAAQrC,GAEvC,OACER,EAAAC,KAAA,MAAAC,OAAAC,OAAA,CACErC,UAAWsC,UACT,2GACAmB,IAID,CAAAf,SAAA,CAAA8B,EAEDzE,EAAAA,IAACiF,EAAc,QACb,CAAAC,QAAQ,WACRtC,QAAS,IAAMxB,IACf+D,SACE1E,EACI8D,GAAuB,0BACvBD,GAAsB,yBAE5B/D,WAAYgC,EAAAA,QAAQ,sBAAuBiC,GAC3CvE,UAAWsC,EAAAA,QAAQ,mCAAoC8B,KAIzDrE,EAAAA,yBAAKC,UAAU,oEACb,CAAA0C,SAAA3C,EAAAA,IAAA,MAAAqC,OAAAC,OAAA,CAAKrC,UAAU,gDACZiE,EAAKP,KAAI,CAACC,EAAMC,IACf7D,EAAAiD,IAAC/C,EAEC,CAAAS,WAAYA,EACZR,GAAIyD,EAAKzD,GACTC,MAAOwD,EAAKxD,MACZE,KAAMsD,EAAKtD,KACX8E,WAAYxB,EAAKwB,WACjB3E,YAAaA,EACbC,SAAUA,EACVF,QAASoD,EAAKpD,QACdY,mBAAoB,IAAMA,IAC1BC,SAAWlB,GAAO0E,EAAc1E,GAChCmB,WAAawC,GAAYxC,EAAWwC,GACpCvC,iBAAkBqC,EAAKrC,iBACvBX,iCAAkCA,EAClCC,4BAA6BA,EAC7BG,sBAAuBA,EACvBF,wBAAyBA,EACzBK,2BAA4BA,EAC5BF,2BAA4BA,EAC5BV,WAAY4D,EACZ9D,YAAa+D,GApBRP,WA0Bb7D,EAAAA,yBAAKC,UAAU,QACZ,CAAA0C,SAAAoC,EAAAA,SAASpB,IAAImB,GAAe,CAAClB,EAAMC,KAClC,MAAMwB,EAAQX,EAAAA,yBAAyBd,EAAM,WAC7C,OACE5D,EAAiBiD,IAAA,MAAAZ,OAAAC,OAAA,CAAArC,UAAU,UACxB,CAAA0C,SAAA0C,IADOxB,EAGV,OAKLe,EAGAD,KAEH,EAGEW,EAAU,EACd7E,cACA6C,QACAG,cACAnD,OACAC,aACAgF,oBACA3E,mCACAC,8BACA2E,WACAC,qBACAC,8BACAC,uBACAC,UACAC,UACAnC,kBACAoC,aACAnD,eAEA,MAAOlB,EAAQC,GAAaC,EAAAA,QAAMC,UAAkB,IAC7CmE,EAAcC,GAAmBrE,EAAAA,QAAMC,UAAkB,IACzDqE,EAAaC,GAAkBvE,EAAAA,QAAMC,UAAkB,GAY9D,OAVAK,EAAAA,WAAU,KACHxB,EAKHiB,GAAU,GAJVQ,YAAW,KACTR,GAAU,EAAK,GACd,IAGJ,GACA,CAACjB,IAGFT,MAACmG,iBACCX,SAAUA,GAAY,cACtBC,mBAAoBA,EACpBC,4BAA6BA,EAC7BC,qBAAsBA,EACtBC,QAASA,EACTC,QAASA,EACTC,WAAYA,GAAU,CAAAnD,SAErB,EAAGyD,OAAMC,WAENlE,EAAAA,KAAAmE,EAAAA,SAAA,CAAA3D,SAAA,CACE3C,EAACiD,IAAAkD,EAAYI,OACX,CAAA5D,SAAAR,EAAAC,KAAA,SAAAC,OAAAC,OAAA,CACErC,UAAWsC,EAAAA,QACTa,EAAAA,QACE,ueAKAgD,GAAQ,yEAEV1C,GAEFb,YAAa,IAAMqD,GAAe,GAClCpD,UAAW,IAAMoD,GAAe,GAChCnD,aAAc,IAAMiD,GAAgB,GACpChD,aAAc,IAAMgD,GAAgB,IAEpC,CAAArD,SAAA,CAAA3C,EAAAA,IAAA,MAAAqC,OAAAC,OAAA,CAAKrC,UAAU,qBACbD,EAACiD,IAAAC,GACCC,KAAM7C,EACNL,UAAWsC,EAAOA,QAChBa,EAAU,QACR,8DACA2C,GAAgB,oDAChBE,GAAe,sDAEjB1F,QAILkB,GACCzB,2BAAKC,UAAU,eACb,CAAA0C,SAAA3C,EAAAA,IAACqD,EAAAA,QACC,CAAAC,MAAOA,EACPrD,UAAWsC,EAAAA,QAAQ,wCAAyCkB,UAI/D8B,GACDvF,EAAAiD,IAACM,EACC,CAAAD,MAAOiC,EAAkB/B,WACzBC,YAAalB,EAAOA,QAClB,iEACA1B,GAEF6C,gBAAiBnB,EAAAA,QACfa,EAAAA,QACE,uHACA,IAAI3B,GAAU,4BAEhBb,WAMVZ,EAAAiD,IAACkD,EAAYK,gBACV9B,EAAwBA,yBACH,mBAAb/B,EAA0BA,EAAS,CAAEyD,OAAMC,UAAW1D,EAC7D,uBAOZ,EAEJ2C,EAAQmB,YAAc,UACtBzC,EAAQsB,QAAUA,EAElB,MAAMoB,EAAe,EAAG/D,cACf3C,EAAAiD,IAAAqD,EAAAK,SAAA,CAAAhE,SAAGA,IAEZ+D,EAAaD,YAAc,eAC3BzC,EAAQ0C,aAAeA,EAEvB,MAAME,EAAS,EACbnG,cACAoG,gBACAC,sBACAC,gBACAC,sBACAtD,kBACAuD,uBACAtE,eAGA,MAAOlB,EAAQC,GAAaC,EAAAA,QAAMC,UAAkB,GAWpD,OAVAK,EAAAA,WAAU,KACHxB,EAKHiB,GAAU,GAJVQ,YAAW,KACTR,GAAU,EAAK,GACd,IAGJ,GACA,CAACjB,IAGFT,2BACG2C,GAGC3C,EAAAA,IAAA,MAAAqC,OAAAC,OAAA,CACErC,UAAWsC,EAAOA,QAChB,6DACAmB,GAEFd,QAAS,IAAMqE,aAAA,EAAAA,KAAwB,CAAAtE,SAEtClB,EACCzB,2BAAKC,UAAU,eACb,CAAA0C,SAAA3C,MAAA,MAAA,CACEkH,IACEH,GACA,iFAEF9G,UAAWsC,UAAQ,gBAAiByE,QAIxChH,EACEiD,IAAA,MAAA,CAAAiE,IACEL,GACA,uFAEF5G,UAAWsC,EAAOA,QAAC,oBAAqBuE,SAMlD,EAEJF,EAAOH,YAAc,SACrBzC,EAAQ4C,OAASA,EAEjB,MAAMO,EAAc,EAClB1G,cACA2G,YACAC,kBACAC,aACAC,qBACAC,2BACAC,mBACA/D,kBAEAiC,uBACA+B,eACAC,qBACAC,oBACAC,0BACAC,4BACAC,kCACAC,mBACAC,yBACAC,mBACAC,yBACAC,4BACAC,kCACAC,2BACAC,iCACAC,uBACAC,+BACAC,0BACAC,gCACAC,yBACAC,+BACAC,qBACAC,6BACAC,qBACAC,2BACAC,oBACAC,0BACAC,gBACAzG,WACAiD,UACAC,UACAL,WACAM,iBAGA,MAAOrE,EAAQC,GAAaC,EAAAA,QAAMC,UAAkB,GAWpD,OAVAK,EAAAA,WAAU,KACHxB,EAKHiB,GAAU,GAJVQ,YAAW,KACTR,GAAU,EAAK,GACd,IAGJ,GACA,CAACjB,IAGFT,MAAAsG,EAAAA,SAAA,CAAA3D,SACGA,GAGCR,EAAKC,KAAA,MAAAC,OAAAC,OAAA,CAAArC,UAAWsC,EAAAA,QAAQ,yBAAuB,CAAAI,SAAA,CAC7C3C,EAACiD,IAAAlD,EAAU,IACXC,MAAK,MAAAqC,OAAAC,OAAA,CAAArC,UAAU,4DACbD,EAACiD,IAAAkD,EACC9D,OAAAC,OAAA,CAAAsD,QAASA,EACTC,QAASA,EACTC,WAAYA,EACZH,qBAAsBA,EACtBjC,gBAAgB,SAChB8B,SAAUA,GAAQ,CAAA7C,SAGjB,EAAGyD,OAAMC,WAENlE,EAAAA,KAAAmE,EAAAA,SAAA,CAAA3D,SAAA,CACE3C,EAACiD,IAAAkD,EAAYI,OACX,CAAA5D,SAAAR,EAAAC,KAAA,MAAAC,OAAAC,OAAA,CACErC,UAAWsC,EAAAA,QACTa,EAAAA,QACE,gdAMAgD,GACE,yEAEJ1C,IAGD,CAAAf,SAAA,CAAA2E,EACCtH,MACE,MAAA,CAAAkH,IACEI,GACA,iFAEFrH,UAAWsC,UACT,oFACAkF,KAIJzH,EAAAA,IAAA,MAAAqC,OAAAC,OAAA,CACErC,UAAWsC,UACT,wFACAkF,IAGF,CAAA9E,SAAA3C,EAAAiD,IAACI,UAAQ,CACPC,MAAOiE,EACPtH,UAAWsC,EAAAA,QACT,6DACAiF,QAMP/F,GACCzB,EAAAA,IAAK,MAAAqC,OAAAC,OAAA,CAAArC,UAAU,eACb,CAAA0C,SAAA3C,MAACqD,EAAAA,QAAQ,CACPC,MAAO8D,GAAa,GACpBnH,UAAWsC,UAAQ,gCAAiC8E,cAM9DrH,EAAAA,IAACmG,EAAYK,MAAK,CAAA7D,SAChBR,EACEC,KAAA,MAAAC,OAAAC,OAAA,CAAArC,UAAWsC,EAAOA,QAChB,4DACAoD,IACD,CAAAhD,SAAA,CAED3C,EAAAA,IAAK,MAAAqC,OAAAC,OAAA,CAAArC,UAAU,kBACbD,MAACqD,EAAAA,QACC,CAAAC,MAAOoE,GAAgB,UACvBzH,UAAWsC,UACT,6CACAoF,QAINxF,EAAKC,KAAA,MAAAC,OAAAC,OAAA,CAAArC,UAAU,gDACZ,CAAA0C,SAAA,CAAAiF,EACC5H,EACEiD,IAAA,MAAA,CAAAiE,IACEU,GACA,iFAEF3H,UAAWsC,UACT,oFACAsF,KAIJ7H,EAAAA,IACE,MAAAqC,OAAAC,OAAA,CAAArC,UAAWsC,EAAOA,QAChB,wFACAsF,cAGF7H,EAAAA,IAACqD,EAAAA,SACCC,MAAOwE,EACP7H,UAAWsC,EAAAA,QACT,6DACAwF,QAMR5F,4BAAKlC,UAAU,iBAAe,CAAA0C,SAAA,CAC5B3C,EAAAA,IAACqD,EAAAA,SACCC,MAAO0E,GAAoB,GAC3B/H,UAAWsC,UACT,+DACA0F,KAGJjI,MAACqD,EAAAA,SACCC,MAAO4E,GAAoB,GAC3BjI,UAAWsC,EAAOA,QAChB,8DACA4F,aAKRhG,EAAAC,KAAA,SAAAC,OAAAC,OAAA,CACErC,UAAWsC,EAAAA,QACT,8DACAkG,GAEF7F,QAAS,KACPyD,IACAmC,SAAAA,GAAwB,GACzB,CAAA7F,SAAA,CAED3C,EAAAA,IAACkD,EACC,CAAAC,KAAMmF,GAA4B,gBAClCrI,UAAWsC,UACT,0BACAgG,KAGJvI,EAAAA,IAACqD,EAAQ,QACP,CAAAC,MAAO8E,GAA6B,iBACpCnI,UAAWsC,EAAOA,QAChB,2CACA8F,SAINlG,+BACElC,UAAWsC,EAAAA,QACT,mEACAwG,GAEFnG,QAAS,KACPyD,IACAyC,SAAAA,GAAsB,GACvB,CAAAnG,SAAA,CAED3C,EAACiD,IAAAC,EACC,CAAAC,KAAMyF,GAA0B,WAChC3I,UAAWsC,EAAOA,QAChB,0BACAsG,KAGJ7I,EAAAA,IAACqD,EAAAA,QAAQ,CACPC,MAAOoF,GAA2B,iBAClCzI,UAAWsC,EAAAA,QACT,2CACAoG,SAIN3I,EAAAA,IAAA,MAAA,CAAKC,UAAU,kCACfkC,EAAAA,KACE,SAAAE,OAAAC,OAAA,CAAArC,UAAU,qEACV2C,QAAS,KACPyD,IACA+C,SAAAA,GAAiB,cAGnBpJ,EAACiD,IAAAC,GACCC,KAAM+F,GAAqB,SAC3BjJ,UAAWsC,EAAAA,QAAQ,0BAA2B4G,KAEhDnJ,MAACqD,EAAAA,QACC,CAAAC,MAAO0F,GAAsB,SAC7B/I,UAAWsC,EAAOA,QAChB,2CACA0G,wBAWpBjJ,MAACD,WAIP,EAEJoH,EAAYV,YAAc,cAC1BzC,EAAQmD,YAAcA,EAEtB,MAAMkC,EAAS,EACb5I,cACA6I,uBACAC,cACAC,oBACAC,cACAC,oBACAC,sBACAC,2BACAC,6BACAC,4BACAC,6BACAC,2BACAC,4BACAC,8BACAC,gCACAC,UACAC,aACA1H,eAGA,MAAOlB,EAAQC,GAAaC,EAAAA,QAAMC,UAAkB,GAWpD,OAVAK,EAAAA,WAAU,KACHxB,EAKHiB,GAAU,GAJVQ,YAAW,KACTR,GAAU,EAAK,GACd,IAGJ,GACA,CAACjB,IAGFT,2BACG2C,GAGCR,EAAAA,0BAAKlC,UAAU,aACZ,CAAA0C,SAAA,CAAA2G,GACCnH,EAAAC,KAAA,MAAAC,OAAAC,OAAA,CAAKrC,UAAU,iDACZwJ,EACCzJ,2BACEC,UAAWsC,UACT,wFACAsH,cAGF7J,MACE,MAAA,CAAAkH,IACEuC,GACA,uFAEFxJ,UAAWsC,EAAAA,QAAQ,UAAWmH,QAIlC1J,MACE,MAAAqC,OAAAC,OAAA,CAAArC,UAAWsC,UACT,wFACAsH,IACD,CAAAlH,SAED3C,MAACqD,EAAAA,SACCC,MAAOqG,EACP1J,UAAWsC,UACT,6DACAqH,QAKPnI,GACCzB,EAAAA,IAAK,MAAAqC,OAAAC,OAAA,CAAArC,UAAU,eACb,CAAA0C,SAAA3C,EAAAA,IAACqD,EAAQ,QAAA,CACPC,MAAOiG,GAAe,aACtBtJ,UAAWsC,EAAOA,QAChB,4DACAiH,YAQXM,GACC9J,EAAAA,IAAA,MAAAqC,OAAAC,OAAA,CAAKrC,UAAU,0CAAwC,CAAA0C,SACrD3C,MAACsK,EAAAA,QACC,CAAApF,QAAQ,YACRtC,QAAS,IAAMmH,aAAA,EAAAA,IACfzG,MAAO7B,EAASuI,GAA4B,iBAAmB,GAC/D/J,UAAWsC,UACTa,EAAAA,QACE,gDACA3B,EAAS,SAAW,OAEtBwI,GAEFM,UAAW9I,OAASiB,EAAYwH,GAA+B,UAC/DM,gBAAiBjI,EAAOA,QAAC,eAAgB4H,QAK/CnK,MAAK,MAAAqC,OAAAC,OAAA,CAAArC,UAAU,0DACZ,CAAA0C,SAAAlB,EACCU,OACEmE,EAAAA,SAAA,CAAA3D,SAAA,CAAA3C,EAAAA,IAAA,MAAAqC,OAAAC,OAAA,CAAKrC,UAAU,eACb,CAAA0C,SAAA3C,MAACqD,EAAAA,QAAQ,CACPC,MAAO8G,GAAW,+BAClBnK,UAAU,kGAGdD,EAAAiD,IAAA,MAAA,CAAKhD,UAAU,kDACfD,EAAAiD,IAAA,MAAAZ,OAAAC,OAAA,CAAKrC,UAAU,eAAa,CAAA0C,SAC1B3C,EAACiD,IAAAI,EAAQ,SACPC,MAAO+G,GAAc,gBACrBpK,UAAU,oGAKhBD,EAAAA,IAAA,MAAA,CAAKC,UAAU,yBAMzB,EAEJoJ,EAAO5C,YAAc,SACrBzC,EAAQqF,OAASA"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../../src/blocks/Sidebar/Sidebar.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-identical-functions */\nimport classNames from 'classnames';\nimport React, { Children, useEffect } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport {\n BaseBadge,\n BaseButton,\n BaseButtonIcon,\n BasePopover,\n BaseText,\n Icon\n} from '../../components';\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport {\n SidebarFooterInterface,\n SidebarHeaderInterface,\n SidebarInterface,\n SidebarMenuExtendedInterface,\n SidebarMenuInterface,\n SidebarPopoverInterface,\n SidebarUserProfileInterface\n} from './Sidebar.type';\n\nconst Divider = () => <div className='w-full h-[1px] bg-sidebar-separator-default' />;\n\n// TODO: tidy up interface\nconst SidebarMenu = ({\n id,\n title,\n titleStyles,\n icon,\n iconStyles,\n subMenu,\n isCollapsed,\n activeId,\n selectedId,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n itemMenuContainerStyles,\n itemMenuActiveContainerStyles,\n itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\n itemSubMenuActiveContainerStyles,\n itemSubMenuActiveTextColor,\n onClickCollapsible,\n onExpand,\n onClickNav,\n notifcationCount\n}: SidebarMenuInterface & SidebarMenuExtendedInterface) => {\n const expanded = selectedId === id;\n const [isShow, setIsShow] = React.useState<boolean>(false);\n const [isMenuMouseEnter, setIsMenuMouseEnter] = React.useState<boolean>(false);\n const [isMenuMouseDown, setIsMenuMouseDown] = React.useState<boolean>(false);\n\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <div\n className={twMerge(\n `overflow-hidden hover:bg-sidebar-menu-background-hover rounded-lg ${\n expanded\n ? itemMenuActiveContainerStyles || 'bg-sidebar-menu-background-active'\n : 'bg-transparent'\n }`,\n itemMenuContainerStyles\n )}\n style={{ backgroundColor: expanded ? itemMenuActiveBgColor : undefined }}\n >\n <button\n onClick={() => {\n if (!isShow && !expanded) onClickCollapsible();\n\n if (expanded) {\n onExpand('');\n return;\n }\n\n onExpand(id);\n }}\n className='h-8 pr-4 pl-3 w-full bg-transparent relative'\n onMouseDown={() => setIsMenuMouseDown(true)}\n onMouseUp={() => setIsMenuMouseDown(false)}\n onMouseEnter={() => setIsMenuMouseEnter(true)}\n onMouseLeave={() => setIsMenuMouseEnter(false)}\n >\n <div className='flex flex-row items-center gap-x-2'>\n <div className='w-4 h-4'>\n <Icon\n name={icon}\n className={twMerge(\n classNames(\n 'w-4 h-4 fill-sidebar-menu-textAndIcon-default',\n isMenuMouseEnter && 'fill-sidebar-menu-textAndIcon-hover',\n isMenuMouseDown && 'fill-sidebar-menu-textAndIcon-active'\n ),\n iconStyles\n )}\n />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={title}\n className={twMerge(\n classNames(\n 'text-sidebar-menu-textAndIcon-default text-sm text-left line-clamp-1 w-full',\n isMenuMouseEnter && 'text-sidebar-menu-textAndIcon-hover',\n isMenuMouseDown && 'text-sidebar-menu-textAndIcon-active'\n ),\n titleStyles\n )}\n />\n </div>\n )}\n {!!notifcationCount && (\n <BaseBadge\n label={notifcationCount.toString()}\n labelStyles={twMerge(\n 'text-[10px] text-sidebar-notificationBadge-textAndIcon-default',\n notificationCountTextStyles\n )}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center min-w-[16px] h-4 rounded-full p-0.5 bg-sidebar-notificationBadge-background-default',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </div>\n </button>\n\n <div\n className={`flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out ${\n expanded && isShow ? 'max-h-screen bg-sidebar-submenu-background-default' : 'max-h-0 '\n }`}\n style={{ backgroundColor: expanded && isShow ? itemMenuActiveBgColor : 'transparent' }}\n >\n {subMenu.map((item, index) => (\n <button\n key={index}\n onClick={() => onClickNav(item)}\n className={twMerge(\n `\n flex flex-1 py-2 \n bg-sidebar-submenu-background-default active:bg-sidebar-submenu-background-active hover:bg-sidebar-submenu-background-hover \n text-sidebar-submenu-textAndIcon-default active:text-sidebar-submenu-textAndIcon-active hover:text-sidebar-submenu-textAndIcon-hover \n pl-8 ${\n item.navLink === activeId\n ? `pl-11 ${\n itemSubMenuActiveContainerStyles || 'text-sidebar-submenu-textAndIcon-active'\n }`\n : ''\n }`,\n itemSubMenuContainerStyles\n )}\n style={{ color: item.navLink === activeId ? itemSubMenuActiveTextColor : undefined }}\n >\n <BaseText\n label={item.title}\n className={`text-xs text-left line-clamp-1 w-full ${\n item.navLink === activeId ? 'font-semibold' : 'font-normal'\n } `}\n />\n </button>\n ))}\n </div>\n </div>\n );\n};\n\nconst Sidebar = ({\n activeId,\n activeParent,\n data,\n isCollapsed,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n containerStyles,\n itemMenuContainerStyles,\n itemMenuIconStyles,\n itemMenuTitleStyles,\n itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\n itemSubMenuActiveTextColor,\n toggleButtonContainerStyles,\n toggleIconOpenName,\n toggleIconCloseName,\n toggleIconStyles,\n onClickCollapsible,\n onClickNav,\n children\n}: SidebarInterface) => {\n const header = getChildrenOnDisplayName(children, 'Header');\n const footer = getChildrenOnDisplayName(children, 'Footer');\n const userProfile = getChildrenOnDisplayName(children, 'UserProfile');\n\n const [selectedId, setSelectedId] = React.useState<string>(activeParent);\n\n const arrayChildren = Children.toArray(children);\n\n return (\n <div\n className={twMerge(\n 'flex flex-col relative h-full px-2 pb-2 ease-in-out duration-300 w-[220px] bg-sidebar-background-default',\n containerStyles\n )}\n >\n {/* Header */}\n {header}\n\n <BaseButtonIcon\n variant='tertiary'\n onClick={() => onClickCollapsible()}\n iconName={\n isCollapsed\n ? toggleIconCloseName || 'chevronDoubleArrowRight'\n : toggleIconOpenName || 'chevronDoubleArrowLeft'\n }\n iconStyles={twMerge('w-[7.5px] h-[7.5px]', toggleIconStyles)}\n className={twMerge('w-6 h-6 absolute top-14 -right-3', toggleButtonContainerStyles)}\n />\n\n {/* Content */}\n <div className='flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none'>\n <div className='flex flex-col justify-start flex-1'>\n {data.map((item, index) => (\n <SidebarMenu\n key={index}\n selectedId={selectedId}\n id={item.id}\n title={item.title}\n icon={item.icon}\n permission={item.permission}\n isCollapsed={isCollapsed}\n activeId={activeId}\n subMenu={item.subMenu}\n onClickCollapsible={() => onClickCollapsible()}\n onExpand={(id) => setSelectedId(id)}\n onClickNav={(navLink) => onClickNav(navLink)}\n notifcationCount={item.notifcationCount}\n notificationCountContainerStyles={notificationCountContainerStyles}\n notificationCountTextStyles={notificationCountTextStyles}\n itemMenuActiveBgColor={itemMenuActiveBgColor}\n itemMenuContainerStyles={itemMenuContainerStyles}\n itemSubMenuActiveTextColor={itemSubMenuActiveTextColor}\n itemSubMenuContainerStyles={itemSubMenuContainerStyles}\n iconStyles={itemMenuIconStyles}\n titleStyles={itemMenuTitleStyles}\n />\n ))}\n </div>\n </div>\n\n <div className='mb-2'>\n {Children.map(arrayChildren, (item, index) => {\n const child = getChildrenOnDisplayName(item, 'Popover');\n return (\n <div key={index} className='w-full'>\n {child}\n </div>\n );\n })}\n </div>\n\n {/* User */}\n {userProfile}\n\n {/* Company */}\n {footer}\n </div>\n );\n};\n\nconst Popover = ({\n isCollapsed,\n label,\n labelStyles,\n icon,\n iconStyles,\n notificationCount,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n position,\n iconTriangleStyles,\n iconTriangleContainerStyles,\n panelContainerStyles,\n offsetX,\n offsetY,\n containerStyles,\n isAutoFlip,\n children\n}: SidebarPopoverInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n const [isMouseEnter, setIsMouseEnter] = React.useState<boolean>(false);\n const [isMouseDown, setIsMouseDown] = React.useState<boolean>(false);\n\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <BasePopover\n position={position || 'right-start'}\n iconTriangleStyles={iconTriangleStyles}\n iconTriangleContainerStyles={iconTriangleContainerStyles}\n panelContainerStyles={panelContainerStyles}\n offsetX={offsetX}\n offsetY={offsetY}\n isAutoFlip={isAutoFlip}\n >\n {({ open, close }) => {\n return (\n <>\n <BasePopover.Button>\n <button\n className={twMerge(\n classNames(\n `\n h-8 pr-4 pl-3 w-full relative flex flex-row items-center rounded-lg gap-x-2\n bg-sidebar-notificationButton-background-default active:bg-sidebar-notificationButton-background-active hover:bg-sidebar-notificationButton-background-hover\n text-sidebar-notificationButton-textAndIcon-default active:text-sidebar-notificationButton-textAndIcon-active hover:text-sidebar-notificationButton-textAndIcon-hover\n `,\n open && 'bg-sidebar-profile-background-active text-sidebar-profile-text-active'\n ),\n containerStyles\n )}\n onMouseDown={() => setIsMouseDown(true)}\n onMouseUp={() => setIsMouseDown(false)}\n onMouseEnter={() => setIsMouseEnter(true)}\n onMouseLeave={() => setIsMouseEnter(false)}\n >\n <div className='w-4 h-4'>\n <Icon\n name={icon}\n className={twMerge(\n classNames(\n 'w-4 h-4 fill-sidebar-notificationButton-textAndIcon-default',\n isMouseEnter && 'fill-sidebar-notificationButton-textAndIcon-hover',\n isMouseDown && 'fill-sidebar-notificationButton-textAndIcon-active'\n ),\n iconStyles\n )}\n />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={label}\n className={twMerge('text-sm text-left line-clamp-1 w-full', labelStyles)}\n />\n </div>\n )}\n {!!notificationCount && (\n <BaseBadge\n label={notificationCount.toString()}\n labelStyles={twMerge(\n 'text-[10px] text-sidebar-notificationBadge-textAndIcon-default',\n notificationCountTextStyles\n )}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center bg-sidebar-notificationBadge-background-default min-w-[16px] h-4 rounded-full p-0.5',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </button>\n </BasePopover.Button>\n <BasePopover.Panel>\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'PopoverPanel'\n )}\n </BasePopover.Panel>\n </>\n );\n }}\n </BasePopover>\n );\n};\nPopover.displayName = 'Popover';\nSidebar.Popover = Popover;\n\nconst PopoverPanel = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>;\n};\nPopoverPanel.displayName = 'PopoverPanel';\nSidebar.PopoverPanel = PopoverPanel;\n\nconst Header = ({\n isCollapsed,\n appLogoClosed,\n appLogoClosedStyles,\n appLogoOpened,\n appLogoOpenedStyles,\n containerStyles,\n onClickHeaderSidebar,\n children\n}: SidebarHeaderInterface) => {\n // TODO: create hooks for code below\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div\n className={twMerge(\n 'flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer',\n containerStyles\n )}\n onClick={() => onClickHeaderSidebar?.()}\n >\n {isShow ? (\n <div className='flex flex-1'>\n <img\n src={\n appLogoOpened ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg'\n }\n className={twMerge('w-[113px] h-7', appLogoOpenedStyles)}\n />\n </div>\n ) : (\n <img\n src={\n appLogoClosed ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n }\n className={twMerge('w-[22px] h-[22px]', appLogoClosedStyles)}\n />\n )}\n </div>\n )}\n </>\n );\n};\nHeader.displayName = 'Header';\nSidebar.Header = Header;\n\nconst UserProfile = ({\n isCollapsed,\n userLabel,\n userLabelStyles,\n userAvatar,\n userAvatarFallback,\n userAvatarFallbackStyles,\n userAvatarStyles,\n containerStyles,\n // Panel\n panelContainerStyles,\n titleAtPanel,\n titleAtPanelStyles,\n userAvatarAtPanel,\n userAvatarAtPanelStyles,\n userAvatarFallbackAtPanel,\n userAvatarFallbackAtPanelStyles,\n userLabelAtPanel,\n userLabelAtPanelStyles,\n userEmailAtPanel,\n userEmailAtPanelStyles,\n manageAccountLabelAtPanel,\n manageAccountLabelAtPanelStyles,\n iconManageAccountAtPanel,\n iconManageAccountAtPanelStyles,\n onClickManageAccount,\n manageAccountContainerStyles,\n translationLabelAtPanel,\n translationLabelAtPanelStyles,\n iconTranslationAtPanel,\n iconTranslationAtPanelStyles,\n onClickTranslation,\n translationContainerStyles,\n logoutLabelAtPanel,\n logoutLabelAtPanelStyles,\n iconLogoutAtPanel,\n iconLogoutAtPanelStyles,\n onClickLogout,\n children,\n offsetX,\n offsetY,\n position,\n isAutoFlip\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarUserProfileInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div className={twMerge('flex flex-col w-full')}>\n <Divider />\n <div className='relative min-h-[56px] flex items-center w-full'>\n <BasePopover\n offsetX={offsetX}\n offsetY={offsetY}\n isAutoFlip={isAutoFlip}\n panelContainerStyles={panelContainerStyles}\n containerStyles='w-full'\n position={position}\n >\n {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n {({ open, close }) => {\n return (\n <>\n <BasePopover.Button>\n <div\n className={twMerge(\n classNames(\n `\n w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg \n bg-sidebar-profile-background-default active:bg-sidebar-profile-background-active hover:bg-sidebar-profile-background-hover \n text-sidebar-profile-text-default active:text-sidebar-profile-text-active hover:text-sidebar-profile-text-hover\n cursor-pointer\n `,\n open &&\n 'bg-sidebar-profile-background-active text-sidebar-profile-text-active'\n ),\n containerStyles\n )}\n >\n {userAvatar ? (\n <img\n src={\n userAvatar ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n }\n className={twMerge(\n 'w-6 h-6 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover',\n userAvatarStyles\n )}\n />\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n userAvatarStyles\n )}\n >\n <BaseText\n label={userAvatarFallback}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n userAvatarFallbackStyles\n )}\n />\n </div>\n )}\n\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={userLabel || ''}\n className={twMerge('line-clamp-1 w-full text-left', userLabelStyles)}\n />\n </div>\n )}\n </div>\n </BasePopover.Button>\n <BasePopover.Panel>\n <div\n className={twMerge(\n 'flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]',\n panelContainerStyles\n )}\n >\n <div className='px-4'>\n <BaseText\n label={titleAtPanel || 'Account'}\n className={twMerge(\n 'text-sm font-semibold text-dark-blackCoral',\n titleAtPanelStyles\n )}\n />\n </div>\n <div className='flex flex-row items-center px-4 gap-x-2 mt-2'>\n {userAvatarAtPanel ? (\n <img\n src={\n userAvatarAtPanel ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n }\n className={twMerge(\n 'w-8 h-8 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover',\n userAvatarAtPanelStyles\n )}\n />\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-8 h-8 bg-sidebar-avatar-background-default rounded',\n userAvatarAtPanelStyles\n )}\n >\n <BaseText\n label={userAvatarFallbackAtPanel}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n userAvatarFallbackAtPanelStyles\n )}\n />\n </div>\n )}\n\n <div className='flex flex-col'>\n <BaseText\n label={userLabelAtPanel || ''}\n className={twMerge(\n 'w-full line-clamp-1 font-normal text-sm text-dark-blackCoral',\n userLabelAtPanelStyles\n )}\n />\n <BaseText\n label={userEmailAtPanel || ''}\n className={twMerge(\n 'w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo',\n userEmailAtPanelStyles\n )}\n />\n </div>\n </div>\n <button\n className={twMerge(\n 'flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent',\n manageAccountContainerStyles\n )}\n onClick={() => {\n close();\n onClickManageAccount?.();\n }}\n >\n <Icon\n name={iconManageAccountAtPanel || 'configuration'}\n className={twMerge(\n 'w-4 h-4 fill-dark-gumbo',\n iconManageAccountAtPanelStyles\n )}\n />\n <BaseText\n label={manageAccountLabelAtPanel || 'Manage Account'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n manageAccountLabelAtPanelStyles\n )}\n />\n </button>\n <button\n className={twMerge(\n 'flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent',\n translationContainerStyles\n )}\n onClick={() => {\n close();\n onClickTranslation?.();\n }}\n >\n <Icon\n name={iconTranslationAtPanel || 'language'}\n className={twMerge(\n 'w-4 h-4 fill-dark-gumbo',\n iconTranslationAtPanelStyles\n )}\n />\n <BaseText\n label={translationLabelAtPanel || 'Translate Page'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n translationLabelAtPanelStyles\n )}\n />\n </button>\n <div className='h-[1px] w-full bg-dark-silver' />\n <button\n className='flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent'\n onClick={() => {\n close();\n onClickLogout?.();\n }}\n >\n <Icon\n name={iconLogoutAtPanel || 'logout'}\n className={twMerge('w-4 h-4 fill-dark-gumbo', iconLogoutAtPanelStyles)}\n />\n <BaseText\n label={logoutLabelAtPanel || 'Logout'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n logoutLabelAtPanelStyles\n )}\n />\n </button>\n </div>\n </BasePopover.Panel>\n </>\n );\n }}\n </BasePopover>\n </div>\n <Divider />\n </div>\n )}\n </>\n );\n};\nUserProfile.displayName = 'UserProfile';\nSidebar.UserProfile = UserProfile;\n\nconst Footer = ({\n isCollapsed,\n isShowCompanyProfile,\n companyName,\n companyNameStyles,\n companyLogo,\n companyLogoStyles,\n companyLogoFallback,\n companlogoFallbackStyles,\n companyLogoContainerStyles,\n isShowButtonChangeCompany,\n buttonChangeCompanyOnClick,\n buttonChangeCompanyLabel,\n buttonChangeCompanyStyles,\n buttonChangeCompanyIconName,\n buttonChangeCompanyIconStyles,\n appName,\n appVersion,\n children\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarFooterInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div className='pt-2 px-2'>\n {isShowCompanyProfile && (\n <div className='flex flex-row items-center gap-x-2'>\n {companyLogo ? (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n companyLogoContainerStyles\n )}\n >\n <img\n src={\n companyLogo ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n }\n className={twMerge('w-4 h-4', companyLogoStyles)}\n />\n </div>\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n companyLogoContainerStyles\n )}\n >\n <BaseText\n label={companyLogoFallback}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n companlogoFallbackStyles\n )}\n />\n </div>\n )}\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={companyName || 'Gajicermat'}\n className={twMerge(\n 'text-sidebar-companyNameText-default text-xs line-clamp-2',\n companyNameStyles\n )}\n />\n </div>\n )}\n </div>\n )}\n\n {isShowButtonChangeCompany && (\n <div className='h-14 w-full flex flex-row items-center'>\n <BaseButton\n variant='secondary'\n onClick={() => buttonChangeCompanyOnClick?.()}\n label={isShow ? buttonChangeCompanyLabel || 'Select Company' : ''}\n className={twMerge(\n classNames(\n 'flex items-center justify-center p-0 h-6 ml-0',\n isShow ? 'w-full' : 'w-6'\n ),\n buttonChangeCompanyStyles\n )}\n rightIcon={isShow ? undefined : buttonChangeCompanyIconName || 'refresh'}\n rightIconStyles={twMerge('ml-0 w-3 h-3', buttonChangeCompanyIconStyles)}\n />\n </div>\n )}\n\n <div className='flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full'>\n {isShow ? (\n <>\n <div className='flex flex-1'>\n <BaseText\n label={appName || '© Gajicermat Digital Mandiri'}\n className='text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-right font-normal'\n />\n </div>\n <div className='w-[1px] h-3 bg-sidebar-appVersionText-default' />\n <div className='flex flex-1'>\n <BaseText\n label={appVersion || 'Version 0.0.0'}\n className='text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-left font-normal'\n />\n </div>\n </>\n ) : (\n <div className='w-[1px] h-3 ' />\n )}\n </div>\n </div>\n )}\n </>\n );\n};\nFooter.displayName = 'Footer';\nSidebar.Footer = Footer;\n\nexport default Sidebar;\n"],"names":["Divider","_jsx","className","SidebarMenu","id","title","titleStyles","icon","iconStyles","subMenu","isCollapsed","activeId","selectedId","notificationCountContainerStyles","notificationCountTextStyles","itemMenuContainerStyles","itemMenuActiveContainerStyles","itemMenuActiveBgColor","itemSubMenuContainerStyles","itemSubMenuActiveContainerStyles","itemSubMenuActiveTextColor","onClickCollapsible","onExpand","onClickNav","notifcationCount","expanded","isShow","setIsShow","React","useState","isMenuMouseEnter","setIsMenuMouseEnter","isMenuMouseDown","setIsMenuMouseDown","useEffect","setTimeout","_jsxs","jsxs","Object","assign","twMerge","style","backgroundColor","undefined","children","onClick","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","jsx","Icon","name","classNames","BaseText","label","BaseBadge","toString","labelStyles","containerStyles","map","item","index","navLink","color","Sidebar","activeParent","data","itemMenuIconStyles","itemMenuTitleStyles","toggleButtonContainerStyles","toggleIconOpenName","toggleIconCloseName","toggleIconStyles","header","getChildrenOnDisplayName","footer","userProfile","setSelectedId","arrayChildren","Children","toArray","BaseButtonIcon","variant","iconName","permission","child","Popover","notificationCount","position","iconTriangleStyles","iconTriangleContainerStyles","panelContainerStyles","offsetX","offsetY","isAutoFlip","isMouseEnter","setIsMouseEnter","isMouseDown","setIsMouseDown","BasePopover","open","close","_Fragment","Button","Panel","displayName","PopoverPanel","Fragment","Header","appLogoClosed","appLogoClosedStyles","appLogoOpened","appLogoOpenedStyles","onClickHeaderSidebar","src","UserProfile","userLabel","userLabelStyles","userAvatar","userAvatarFallback","userAvatarFallbackStyles","userAvatarStyles","titleAtPanel","titleAtPanelStyles","userAvatarAtPanel","userAvatarAtPanelStyles","userAvatarFallbackAtPanel","userAvatarFallbackAtPanelStyles","userLabelAtPanel","userLabelAtPanelStyles","userEmailAtPanel","userEmailAtPanelStyles","manageAccountLabelAtPanel","manageAccountLabelAtPanelStyles","iconManageAccountAtPanel","iconManageAccountAtPanelStyles","onClickManageAccount","manageAccountContainerStyles","translationLabelAtPanel","translationLabelAtPanelStyles","iconTranslationAtPanel","iconTranslationAtPanelStyles","onClickTranslation","translationContainerStyles","logoutLabelAtPanel","logoutLabelAtPanelStyles","iconLogoutAtPanel","iconLogoutAtPanelStyles","onClickLogout","Footer","isShowCompanyProfile","companyName","companyNameStyles","companyLogo","companyLogoStyles","companyLogoFallback","companlogoFallbackStyles","companyLogoContainerStyles","isShowButtonChangeCompany","buttonChangeCompanyOnClick","buttonChangeCompanyLabel","buttonChangeCompanyStyles","buttonChangeCompanyIconName","buttonChangeCompanyIconStyles","appName","appVersion","BaseButton","rightIcon","rightIconStyles"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";var e=require("react/jsx-runtime"),i=require("../../../node_modules/classnames/index.js"),t=require("../../../node_modules/prop-types/index.js"),a=require("react"),r=require("styled-components"),s=require("../../../node_modules/tailwind-merge/dist/lib/tw-join.mjs.js"),d=require("../../styles/BorderRadius.js"),l=require("../Icon/Icon.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(r);const c=n.default.input.attrs({type:"checkbox"})`
|
|
2
2
|
position: absolute;
|
|
3
|
-
width:
|
|
4
|
-
height:
|
|
3
|
+
width: 16px;
|
|
4
|
+
height: 16px;
|
|
5
5
|
cursor: pointer;
|
|
6
6
|
opacity: 0;
|
|
7
7
|
`,b=n.default.input.attrs({type:"checkbox"})`
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
`,u=n.default.div`
|
|
14
14
|
align-items: center;
|
|
15
15
|
display: flex;
|
|
16
|
-
height: ${({variant:e})=>"small"===e?"12px":"
|
|
16
|
+
height: ${({variant:e})=>"small"===e?"12px":"16px"};
|
|
17
17
|
justify-content: center;
|
|
18
18
|
position: relative;
|
|
19
|
-
width: ${({variant:e})=>"small"===e?"12px":"
|
|
19
|
+
width: ${({variant:e})=>"small"===e?"12px":"16px"};
|
|
20
20
|
`,p=n.default.div`
|
|
21
21
|
border-radius: ${d.BorderRadiusType.small};
|
|
22
|
-
height: ${e=>"small"===e.variant?"12px":"
|
|
23
|
-
width: ${e=>"small"===e.variant?"12px":"
|
|
24
|
-
`,h=a.forwardRef(((t,a)=>e.jsxs(u,Object.assign({"data-test-id":t.dataTestId,variant:t.variant},{children:["small"===t.variant?e.jsx(b,Object.assign({},t,{ref:a,disabled:t.isDisabled})):e.jsx(c,Object.assign({},t,{ref:a,disabled:t.isDisabled})),t.checked?e.jsx(l,{name:t.indeterminate?"checkboxIndeterminateFill":"checkboxFill",className:s.twJoin(i.default("small"===t.variant?"w-3 h-3":"w-
|
|
22
|
+
height: ${e=>"small"===e.variant?"12px":"16px"};
|
|
23
|
+
width: ${e=>"small"===e.variant?"12px":"16px"};
|
|
24
|
+
`,h=a.forwardRef(((t,a)=>e.jsxs(u,Object.assign({"data-test-id":t.dataTestId,variant:t.variant},{children:["small"===t.variant?e.jsx(b,Object.assign({},t,{ref:a,disabled:t.isDisabled})):e.jsx(c,Object.assign({},t,{ref:a,disabled:t.isDisabled})),t.checked?e.jsx(l,{name:t.indeterminate?"checkboxIndeterminateFill":"checkboxFill",className:s.twJoin(i.default("small"===t.variant?"w-3 h-3":"w-4 h-4",s.twJoin("fill-blue-buttonBlue","fill-checkbox-background-active"),t.isDisabled&&s.twJoin("fill-dark-silver","fill-checkbox-background-disable-checked")))}):e.jsx(p,{variant:t.variant,className:s.twJoin(i.default("border border-solid",t.isDisabled?"border-dark-silver bg-light-whiteSmoke":"border-dark-gumbo bg-light-whiteSolid"),i.default(t.isDisabled?"border-checkbox-border-disable-unchecked bg-checkbox-background-disable-unchecked":"border-checkbox-border-default bg-checkbox-background-default"))})]}))));h.displayName="Checkbox",h.prototype={indeterminate:t.propTypesExports.bool},h.defaultProps={indeterminate:!1},module.exports=h;
|
|
25
25
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as PropTypes from 'prop-types';\nimport { forwardRef } from 'react';\nimport styled from 'styled-components';\nimport { twJoin } from 'tailwind-merge';\n\nimport { BorderRadiusType } from '../../styles/BorderRadius';\nimport { Icon } from '../Icon';\nimport { CheckboxInterface } from './Checkbox.type';\n\nconst HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`\n position: absolute;\n width:
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as PropTypes from 'prop-types';\nimport { forwardRef } from 'react';\nimport styled from 'styled-components';\nimport { twJoin } from 'tailwind-merge';\n\nimport { BorderRadiusType } from '../../styles/BorderRadius';\nimport { Icon } from '../Icon';\nimport { CheckboxInterface } from './Checkbox.type';\n\nconst HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`\n position: absolute;\n width: 16px;\n height: 16px;\n cursor: pointer;\n opacity: 0;\n`;\n\nconst SmallHiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`\n position: absolute;\n width: 12px;\n height: 12px;\n cursor: pointer;\n opacity: 0;\n`;\n\nconst CheckboxContainer = styled.div<{ variant: string }>`\n align-items: center;\n display: flex;\n height: ${({ variant }) => (variant === 'small' ? '12px' : '16px')};\n justify-content: center;\n position: relative;\n width: ${({ variant }) => (variant === 'small' ? '12px' : '16px')};\n`;\nconst CheckboxOff = styled.div<{ variant?: string }>`\n border-radius: ${BorderRadiusType['small']};\n height: ${(props) => (props.variant === 'small' ? '12px' : '16px')};\n width: ${(props) => (props.variant === 'small' ? '12px' : '16px')};\n`;\n\nconst Checkbox = forwardRef((props: CheckboxInterface, ref: React.Ref<HTMLInputElement>) => {\n return (\n <CheckboxContainer data-test-id={props.dataTestId} variant={props.variant}>\n {props.variant === 'small' ? (\n <SmallHiddenCheckbox {...props} ref={ref} disabled={props.isDisabled} />\n ) : (\n <HiddenCheckbox {...props} ref={ref} disabled={props.isDisabled} />\n )}\n {props.checked ? (\n <Icon\n name={props.indeterminate ? 'checkboxIndeterminateFill' : 'checkboxFill'}\n className={twJoin(\n classNames(\n props.variant === 'small' ? 'w-3 h-3' : 'w-4 h-4',\n twJoin('fill-blue-buttonBlue', 'fill-checkbox-background-active'),\n props.isDisabled &&\n twJoin('fill-dark-silver', 'fill-checkbox-background-disable-checked')\n )\n )}\n />\n ) : (\n <CheckboxOff\n variant={props.variant}\n className={twJoin(\n classNames(\n 'border border-solid',\n props.isDisabled\n ? 'border-dark-silver bg-light-whiteSmoke'\n : 'border-dark-gumbo bg-light-whiteSolid'\n ),\n classNames(\n props.isDisabled\n ? 'border-checkbox-border-disable-unchecked bg-checkbox-background-disable-unchecked'\n : 'border-checkbox-border-default bg-checkbox-background-default'\n )\n )}\n />\n )}\n </CheckboxContainer>\n );\n});\nCheckbox.displayName = 'Checkbox';\nCheckbox.prototype = {\n indeterminate: PropTypes.bool\n};\nCheckbox.defaultProps = {\n indeterminate: false\n};\nexport default Checkbox;\n"],"names":["HiddenCheckbox","styled","input","attrs","type","SmallHiddenCheckbox","CheckboxContainer","div","variant","CheckboxOff","BorderRadiusType","props","Checkbox","forwardRef","ref","_jsxs","Object","assign","dataTestId","children","_jsx","jsx","disabled","isDisabled","checked","Icon","name","indeterminate","className","twJoin","classNames","displayName","prototype","PropTypes.bool","propTypesExports","bool","defaultProps"],"mappings":"obAUA,MAAMA,EAAiBC,EAAM,QAACC,MAAMC,MAAM,CAAEC,KAAM,YAAa;;;;;;EAQzDC,EAAsBJ,EAAM,QAACC,MAAMC,MAAM,CAAEC,KAAM,YAAa;;;;;;EAQ9DE,EAAoBL,EAAAA,QAAOM,GAAwB;;;YAG7C,EAAGC,aAA2B,UAAZA,EAAsB,OAAS;;;WAGlD,EAAGA,aAA2B,UAAZA,EAAsB,OAAS;EAEtDC,EAAcR,EAAAA,QAAOM,GAAyB;mBACjCG,EAAAA,iBAAwB;YAC9BC,GAA6B,UAAlBA,EAAMH,QAAsB,OAAS;WACjDG,GAA6B,UAAlBA,EAAMH,QAAsB,OAAS;EAGtDI,EAAWC,EAAUA,YAAC,CAACF,EAA0BG,IAEnDC,EAAAA,KAACT,EAAgCU,OAAAC,OAAA,CAAA,eAAAN,EAAMO,WAAYV,QAASG,EAAMH,SAC/D,CAAAW,SAAA,CAAkB,UAAlBR,EAAMH,QACLY,EAACC,IAAAhB,EAAwBW,OAAAC,OAAA,CAAA,EAAAN,GAAOG,IAAKA,EAAKQ,SAAUX,EAAMY,cAE1DH,EAAAA,IAACpB,EAAcgB,OAAAC,OAAA,CAAA,EAAKN,EAAK,CAAEG,IAAKA,EAAKQ,SAAUX,EAAMY,cAEtDZ,EAAMa,QACLJ,EAAAA,IAACK,EAAI,CACHC,KAAMf,EAAMgB,cAAgB,4BAA8B,eAC1DC,UAAWC,EAAAA,OACTC,EAAAA,QACoB,UAAlBnB,EAAMH,QAAsB,UAAY,UACxCqB,EAAMA,OAAC,uBAAwB,mCAC/BlB,EAAMY,YACJM,EAAMA,OAAC,mBAAoB,gDAKnCT,MAACX,EAAW,CACVD,QAASG,EAAMH,QACfoB,UAAWC,EAAAA,OACTC,EAAAA,QACE,sBACAnB,EAAMY,WACF,yCACA,yCAENO,UACEnB,EAAMY,WACF,oFACA,0EAQlBX,EAASmB,YAAc,WACvBnB,EAASoB,UAAY,CACnBL,cAAeM,EAAcC,iBAAAC,MAE/BvB,EAASwB,aAAe,CACtBT,eAAe"}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),i=require("../../../node_modules/classnames/index.js"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),i=require("../../../node_modules/classnames/index.js"),a=require("../../../node_modules/prop-types/index.js"),s=require("styled-components"),r=require("../../../node_modules/tailwind-merge/dist/lib/tw-join.mjs.js"),d=require("../../styles/BorderRadius.js"),t=require("../Icon/Icon.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(s);const n=o.default.div`
|
|
2
2
|
align-items: center;
|
|
3
3
|
display: flex;
|
|
4
|
-
height:
|
|
4
|
+
height: ${({variant:e})=>"small"===e?"12px":"16px"};
|
|
5
5
|
justify-content: center;
|
|
6
6
|
position: relative;
|
|
7
|
-
width:
|
|
8
|
-
`,
|
|
7
|
+
width: ${({variant:e})=>"small"===e?"12px":"16px"};
|
|
8
|
+
`,u=o.default.input.attrs((()=>({type:"radio"})))`
|
|
9
9
|
position: absolute;
|
|
10
|
-
height: ${e=>`${e.size}px`};
|
|
11
|
-
width: ${e=>`${e.size}px`};
|
|
12
10
|
cursor: pointer;
|
|
13
11
|
opacity: 0;
|
|
14
|
-
`,
|
|
15
|
-
border-radius: ${
|
|
16
|
-
height: ${
|
|
17
|
-
width: ${
|
|
18
|
-
`,
|
|
12
|
+
`,c=o.default.div`
|
|
13
|
+
border-radius: ${d.BorderRadiusType.round};
|
|
14
|
+
height: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
15
|
+
width: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
16
|
+
`,p=a=>e.jsxs(n,Object.assign({"data-test-id":`radioButton-${a.value}`,variant:a.size},{children:[e.jsx(u,{name:a.name,value:a.value,checked:a.checked,onChange:e=>a.onClick(e.target.value),disabled:a.isDisabled,className:r.twJoin(i.default("small"===a.size?"w-3 h-3":"w-4 h-4"))}),a.checked?e.jsx(t,{name:"radioButton",className:r.twJoin(i.default("small"===a.size?"w-3 h-3":"w-4 h-4",r.twJoin("fill-blue-buttonBlue","fill-radio-background-active"),a.isDisabled&&r.twJoin("fill-dark-silver","fill-radio-background-disable-checked")))}):e.jsx(c,{size:a.size?a.size:"medium",className:r.twJoin(i.default("border-2 border-solid",a.isDisabled?"border-radio-border-disable-unchecked bg-radio-background-disable-unchecked":"border-radio-border-default bg-radio-background-default"))})]}));p.prototype={value:a.propTypesExports.string},p.defaultProps={value:"string"},module.exports=p;
|
|
19
17
|
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { twJoin } from 'tailwind-merge';\n\nimport { BorderRadiusType } from '../../styles/BorderRadius';\nimport { Icon } from '../Icon';\nimport { RadioButtonInterface, RadioSizeType
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { twJoin } from 'tailwind-merge';\n\nimport { BorderRadiusType } from '../../styles/BorderRadius';\nimport { Icon } from '../Icon';\nimport { RadioButtonInterface, RadioSizeType } from './RadioButton.type';\n\nconst RadioContainerStyled = styled.div<{ variant: RadioSizeType }>`\n align-items: center;\n display: flex;\n height: ${({ variant }) => (variant === 'small' ? '12px' : '16px')};\n justify-content: center;\n position: relative;\n width: ${({ variant }) => (variant === 'small' ? '12px' : '16px')};\n`;\n\nconst HiddenRadioStyled = styled.input.attrs<RadioButtonInterface>(() => ({\n type: 'radio'\n}))`\n position: absolute;\n cursor: pointer;\n opacity: 0;\n`;\n\nconst RadioOffStyled = styled.div<{ size: RadioSizeType }>`\n border-radius: ${BorderRadiusType['round']};\n height: ${({ size }) => (size === 'small' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'small' ? '12px' : '16px')};\n`;\n\nconst Radio = (props: RadioButtonInterface) => (\n <RadioContainerStyled data-test-id={`radioButton-${props.value}`} variant={props.size}>\n <HiddenRadioStyled\n name={props.name}\n value={props.value}\n checked={props.checked}\n onChange={(e) => props.onClick(e.target.value)}\n disabled={props.isDisabled}\n className={twJoin(classNames(props.size === 'small' ? 'w-3 h-3' : 'w-4 h-4'))}\n />\n {props.checked ? (\n <Icon\n name='radioButton'\n className={twJoin(\n classNames(\n props.size === 'small' ? 'w-3 h-3' : 'w-4 h-4',\n twJoin('fill-blue-buttonBlue', 'fill-radio-background-active'),\n props.isDisabled && twJoin('fill-dark-silver', 'fill-radio-background-disable-checked')\n )\n )}\n />\n ) : (\n <RadioOffStyled\n size={props.size ? props.size : 'medium'}\n className={twJoin(\n classNames(\n 'border-2 border-solid',\n props.isDisabled\n ? 'border-radio-border-disable-unchecked bg-radio-background-disable-unchecked'\n : 'border-radio-border-default bg-radio-background-default'\n )\n )}\n />\n )}\n </RadioContainerStyled>\n);\n\nRadio.prototype = {\n value: PropTypes.string\n};\nRadio.defaultProps = {\n value: 'string'\n};\nexport default Radio;\n"],"names":["RadioContainerStyled","styled","div","variant","HiddenRadioStyled","input","attrs","type","RadioOffStyled","BorderRadiusType","size","Radio","props","_jsxs","Object","assign","value","_jsx","name","checked","onChange","e","onClick","target","disabled","isDisabled","className","twJoin","classNames","Icon","prototype","PropTypes.string","propTypesExports","string","defaultProps"],"mappings":"iaASA,MAAMA,EAAuBC,EAAAA,QAAOC,GAA+B;;;YAGvD,EAAGC,aAA2B,UAAZA,EAAsB,OAAS;;;WAGlD,EAAGA,aAA2B,UAAZA,EAAsB,OAAS;EAGtDC,EAAoBH,EAAM,QAACI,MAAMC,OAA4B,KAAO,CACxEC,KAAM,WACL;;;;EAMGC,EAAiBP,EAAAA,QAAOC,GAA4B;mBACvCO,EAAAA,iBAAwB;YAC/B,EAAGC,UAAqB,UAATA,EAAmB,OAAS;WAC5C,EAAGA,UAAqB,UAATA,EAAmB,OAAS;EAGhDC,EAASC,GACbC,EAAAA,KAACb,EAAoBc,OAAAC,OAAA,CAAA,eAAe,eAAeH,EAAMI,QAASb,QAASS,EAAMF,iBAC/EO,EAAAA,IAACb,GACCc,KAAMN,EAAMM,KACZF,MAAOJ,EAAMI,MACbG,QAASP,EAAMO,QACfC,SAAWC,GAAMT,EAAMU,QAAQD,EAAEE,OAAOP,OACxCQ,SAAUZ,EAAMa,WAChBC,UAAWC,SAAOC,EAAAA,QAA0B,UAAfhB,EAAMF,KAAmB,UAAY,cAEnEE,EAAMO,QACLF,EAAAA,IAACY,GACCX,KAAK,cACLQ,UAAWC,EAAAA,OACTC,EAAU,QACO,UAAfhB,EAAMF,KAAmB,UAAY,UACrCiB,EAAMA,OAAC,uBAAwB,gCAC/Bf,EAAMa,YAAcE,EAAMA,OAAC,mBAAoB,6CAKrDV,MAACT,GACCE,KAAME,EAAMF,KAAOE,EAAMF,KAAO,SAChCgB,UAAWC,EAAAA,OACTC,EAAU,QACR,wBACAhB,EAAMa,WACF,8EACA,kEAQhBd,EAAMmB,UAAY,CAChBd,MAAOe,EAAgBC,iBAAAC,QAEzBtB,EAAMuB,aAAe,CACnBlB,MAAO"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../../styles/Colors.js"),t=require("../../styles/Spacing.js");require("../Avatar/Avatar.js"),require("../Backdrop/Backdrop.js"),require("../Badge/Badge.js"),require("../Text/BaseText.js");var s=require("../Text/Text.js");require("../Breadcrumbs/BaseBreadcrumbs.js"),require("../Breadcrumbs/Breadcrumbs.js"),require("../Button/ButtonHyperlink.js"),require("../Button/BaseButton.js"),require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js");var a=require("../Button/ButtonLink.js");require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../Card/InfoCard.js"),require("../Checkbox/Checkbox.js"),require("../../../node_modules/classnames/index.js"),require("react");var o=require("../Icon/Icon.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../CheckPicker/CheckPicker.js"),require("../Container/BaseCollapsibleContainer.js"),require("../DatePicker/DatePicker.js"),require("../DatePicker/DatePickerRange.js"),require("../DatePicker/DatePickerTime.js"),require("../Heading/Heading.js"),require("../IconProduct/IconProduct.js"),require("../Image/Image.js"),require("../LoadingIndicator/LoadingIndicator.js"),require("../LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../MessageBox/MessageBox.js"),require("../Modal/BaseModal.js"),require("../Modal/Modal.js"),require("../Popover/BasePopover.js"),require("../Preview/BasePreview.js"),require("../ProgressBar/ProgressBar.js"),require("../ProgressIndicator/ProgressIndicator.js"),require("../RadioButton/RadioButton.js"),require("../SelectPicker/SelectPicker.js"),require("../Table/TablePage.js"),require("../Table/TableResponsive.js"),require("./BaseAccordionTabs.js"),require("../Textarea/Textarea.js"),require("../TextInput/TextInput.js"),require("../TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../ToggleButton/ToggleButton.js"),require("../Uploader/BaseUploader.js");var
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../../styles/Colors.js"),t=require("../../styles/Spacing.js");require("../Avatar/Avatar.js"),require("../Backdrop/Backdrop.js"),require("../Badge/Badge.js"),require("../Text/BaseText.js");var s=require("../Text/Text.js");require("../Breadcrumbs/BaseBreadcrumbs.js"),require("../Breadcrumbs/Breadcrumbs.js"),require("../Button/ButtonHyperlink.js"),require("../Button/BaseButton.js"),require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js");var a=require("../Button/ButtonLink.js");require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../Card/InfoCard.js"),require("../Checkbox/Checkbox.js"),require("../../../node_modules/classnames/index.js"),require("react");var o=require("../Icon/Icon.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../CheckPicker/CheckPicker.js"),require("../Container/BaseCollapsibleContainer.js"),require("../DatePicker/DatePicker.js"),require("../DatePicker/DatePickerRange.js"),require("../DatePicker/DatePickerTime.js"),require("../Heading/Heading.js"),require("../IconProduct/IconProduct.js"),require("../Image/Image.js"),require("../LoadingIndicator/LoadingIndicator.js"),require("../LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../MessageBox/MessageBox.js"),require("../Modal/BaseModal.js"),require("../Modal/Modal.js"),require("../Popover/BasePopover.js"),require("../Preview/BasePreview.js"),require("../ProgressBar/ProgressBar.js"),require("../ProgressIndicator/ProgressIndicator.js"),require("../RadioButton/RadioButton.js"),require("../SelectPicker/SelectPicker.js"),require("../Table/TablePage.js"),require("../Table/TableResponsive.js"),require("./BaseAccordionTabs.js"),require("../Textarea/Textarea.js"),require("../TextInput/TextInput.js"),require("../TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../ToggleButton/ToggleButton.js"),require("../Tooltip/BaseTooltip.js"),require("../Uploader/BaseUploader.js");var l=n(r);const u=l.default.ul`
|
|
2
2
|
display: flex;
|
|
3
3
|
list-style: none;
|
|
4
4
|
margin: 0;
|
|
5
5
|
padding: 0;
|
|
6
|
-
`,d=
|
|
6
|
+
`,d=l.default.li`
|
|
7
7
|
align-items: center;
|
|
8
8
|
background-color: ${({isDisabled:e})=>e?i.ColorLight.whiteSmoke:i.ColorLight.whiteSolid};
|
|
9
9
|
border: none;
|
|
@@ -11,5 +11,5 @@
|
|
|
11
11
|
display: inline-flex;
|
|
12
12
|
justify-content: center;
|
|
13
13
|
padding: ${t.PaddingType["extra-small"]} ${t.PaddingType.medium};
|
|
14
|
-
`;module.exports=r=>e.jsx(
|
|
14
|
+
`;module.exports=r=>e.jsx(u,Object.assign({"data-test-id":r.dataTestId},{children:r.list.map(((t,n)=>t.isDisabled?e.jsx(d,Object.assign({activeColor:r.activeColor,isActive:r.activeItem===t.id,isDisabled:t.isDisabled},{children:e.jsx(s.default,{label:t.text,textTransform:"capitalize",color:r.activeItem===t.id?i.ColorDark.blackCoral:i.ColorDark.bermudaGray,fontWeight:r.activeItem===t.id?"semi-bold":"regular"})}),n):e.jsx(a,Object.assign({onClick:()=>t.onClick(t)},{children:e.jsxs(d,Object.assign({isActive:r.activeItem===t.id,activeColor:r.activeColor,isDisabled:t.isDisabled},{children:[e.jsx(s.default,{label:t.text,textTransform:"capitalize",color:r.activeItem===t.id?i.ColorDark.blackCoral:i.ColorDark.bermudaGray,fontWeight:r.activeItem===t.id?"semi-bold":"regular"}),t.isContainError&&e.jsx("div",Object.assign({style:{marginLeft:10,display:"flex"}},{children:e.jsx(o,{name:"informationfill",size:"micro",color:i.ColorRed.fireEngineRed})}))]}))}),n)))}));
|
|
15
15
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ColorBlue, ColorDark, ColorLight, ColorRed } from '../../styles/Colors';\nimport { PaddingType } from '../../styles/Spacing';\nimport { Icon } from '..';\nimport { ButtonLink } from '../Button';\nimport { Text } from '../Text';\nimport { TabsInterface } from './Tabs.type';\n\nconst TabsStyled = styled.ul`\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\ninterface TabItemStyledInterface {\n isDisabled?: boolean;\n isActive?: boolean;\n activeColor?: string;\n}\n\nconst TabItemStyled = styled.li`\n align-items: center;\n background-color: ${({ isDisabled }: TabItemStyledInterface) =>\n isDisabled ? ColorLight.whiteSmoke : ColorLight.whiteSolid};\n border: none;\n border-bottom: ${({ isActive, activeColor = ColorBlue.cornFlowerBlue }: TabItemStyledInterface) =>\n isActive ? `2px solid ${activeColor}` : 'none'};\n display: inline-flex;\n justify-content: center;\n padding: ${PaddingType['extra-small']} ${PaddingType.medium};\n`;\n\nconst Tabs = (props: TabsInterface) => {\n return (\n <TabsStyled data-test-id={props.dataTestId}>\n {props.list.map((item, index) => {\n if (item.isDisabled) {\n return (\n <TabItemStyled\n activeColor={props.activeColor}\n isActive={props.activeItem === item.id}\n isDisabled={item.isDisabled}\n key={index}\n >\n <Text\n label={item.text}\n textTransform='capitalize'\n color={props.activeItem === item.id ? ColorDark.blackCoral : ColorDark.bermudaGray}\n fontWeight={props.activeItem === item.id ? 'semi-bold' : 'regular'}\n />\n </TabItemStyled>\n );\n }\n return (\n <ButtonLink key={index} onClick={() => item.onClick(item)}>\n <TabItemStyled\n isActive={props.activeItem === item.id}\n activeColor={props.activeColor}\n isDisabled={item.isDisabled}\n >\n <Text\n label={item.text}\n textTransform='capitalize'\n color={props.activeItem === item.id ? ColorDark.blackCoral : ColorDark.bermudaGray}\n fontWeight={props.activeItem === item.id ? 'semi-bold' : 'regular'}\n />\n {item.isContainError && (\n <div style={{ marginLeft: 10, display: 'flex' }}>\n <Icon name='informationfill' size='micro' color={ColorRed.fireEngineRed} />\n </div>\n )}\n </TabItemStyled>\n </ButtonLink>\n );\n })}\n </TabsStyled>\n );\n};\n\nexport default Tabs;\n"],"names":["TabsStyled","styled","ul","TabItemStyled","li","isDisabled","ColorLight","whiteSmoke","whiteSolid","isActive","activeColor","ColorBlue","cornFlowerBlue","PaddingType","medium","props","_jsx","dataTestId","children","list","map","item","index","jsx","Object","assign","activeItem","id","Text","label","text","textTransform","color","ColorDark","blackCoral","bermudaGray","fontWeight","ButtonLink","onClick","_jsxs","isContainError","style","marginLeft","display","Icon","name","size","ColorRed","fireEngineRed"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { ColorBlue, ColorDark, ColorLight, ColorRed } from '../../styles/Colors';\nimport { PaddingType } from '../../styles/Spacing';\nimport { Icon } from '..';\nimport { ButtonLink } from '../Button';\nimport { Text } from '../Text';\nimport { TabsInterface } from './Tabs.type';\n\nconst TabsStyled = styled.ul`\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\ninterface TabItemStyledInterface {\n isDisabled?: boolean;\n isActive?: boolean;\n activeColor?: string;\n}\n\nconst TabItemStyled = styled.li`\n align-items: center;\n background-color: ${({ isDisabled }: TabItemStyledInterface) =>\n isDisabled ? ColorLight.whiteSmoke : ColorLight.whiteSolid};\n border: none;\n border-bottom: ${({ isActive, activeColor = ColorBlue.cornFlowerBlue }: TabItemStyledInterface) =>\n isActive ? `2px solid ${activeColor}` : 'none'};\n display: inline-flex;\n justify-content: center;\n padding: ${PaddingType['extra-small']} ${PaddingType.medium};\n`;\n\nconst Tabs = (props: TabsInterface) => {\n return (\n <TabsStyled data-test-id={props.dataTestId}>\n {props.list.map((item, index) => {\n if (item.isDisabled) {\n return (\n <TabItemStyled\n activeColor={props.activeColor}\n isActive={props.activeItem === item.id}\n isDisabled={item.isDisabled}\n key={index}\n >\n <Text\n label={item.text}\n textTransform='capitalize'\n color={props.activeItem === item.id ? ColorDark.blackCoral : ColorDark.bermudaGray}\n fontWeight={props.activeItem === item.id ? 'semi-bold' : 'regular'}\n />\n </TabItemStyled>\n );\n }\n return (\n <ButtonLink key={index} onClick={() => item.onClick(item)}>\n <TabItemStyled\n isActive={props.activeItem === item.id}\n activeColor={props.activeColor}\n isDisabled={item.isDisabled}\n >\n <Text\n label={item.text}\n textTransform='capitalize'\n color={props.activeItem === item.id ? ColorDark.blackCoral : ColorDark.bermudaGray}\n fontWeight={props.activeItem === item.id ? 'semi-bold' : 'regular'}\n />\n {item.isContainError && (\n <div style={{ marginLeft: 10, display: 'flex' }}>\n <Icon name='informationfill' size='micro' color={ColorRed.fireEngineRed} />\n </div>\n )}\n </TabItemStyled>\n </ButtonLink>\n );\n })}\n </TabsStyled>\n );\n};\n\nexport default Tabs;\n"],"names":["TabsStyled","styled","ul","TabItemStyled","li","isDisabled","ColorLight","whiteSmoke","whiteSolid","isActive","activeColor","ColorBlue","cornFlowerBlue","PaddingType","medium","props","_jsx","dataTestId","children","list","map","item","index","jsx","Object","assign","activeItem","id","Text","label","text","textTransform","color","ColorDark","blackCoral","bermudaGray","fontWeight","ButtonLink","onClick","_jsxs","isContainError","style","marginLeft","display","Icon","name","size","ColorRed","fireEngineRed"],"mappings":"ioEASA,MAAMA,EAAaC,EAAAA,QAAOC,EAAE;;;;;EAatBC,EAAgBF,EAAAA,QAAOG,EAAE;;sBAET,EAAGC,gBACrBA,EAAaC,EAAAA,WAAWC,WAAaD,EAAUA,WAACE;;mBAEjC,EAAGC,WAAUC,cAAcC,EAASA,UAACC,kBACpDH,EAAW,aAAaC,IAAgB;;;aAG/BG,EAAWA,YAAC,kBAAkBA,EAAAA,YAAYC;iBAGzCC,GAEVC,EAAAA,IAAChB,gCAAyBe,EAAME,YAC7B,CAAAC,SAAAH,EAAMI,KAAKC,KAAI,CAACC,EAAMC,IACjBD,EAAKhB,WAELW,EAACO,IAAApB,EACCqB,OAAAC,OAAA,CAAAf,YAAaK,EAAML,YACnBD,SAAUM,EAAMW,aAAeL,EAAKM,GACpCtB,WAAYgB,EAAKhB,YAGjB,CAAAa,SAAAF,EAAAO,IAACK,UACC,CAAAC,MAAOR,EAAKS,KACZC,cAAc,aACdC,MAAOjB,EAAMW,aAAeL,EAAKM,GAAKM,YAAUC,WAAaD,EAASA,UAACE,YACvEC,WAAYrB,EAAMW,aAAeL,EAAKM,GAAK,YAAc,cANtDL,GAYTN,EAAAO,IAACc,EAAUb,OAAAC,OAAA,CAAaa,QAAS,IAAMjB,EAAKiB,QAAQjB,IAClD,CAAAH,SAAAqB,OAACpC,EAAaqB,OAAAC,OAAA,CACZhB,SAAUM,EAAMW,aAAeL,EAAKM,GACpCjB,YAAaK,EAAML,YACnBL,WAAYgB,EAAKhB,YAAU,CAAAa,SAAA,CAE3BF,MAACY,EAAAA,QACC,CAAAC,MAAOR,EAAKS,KACZC,cAAc,aACdC,MAAOjB,EAAMW,aAAeL,EAAKM,GAAKM,EAASA,UAACC,WAAaD,EAAAA,UAAUE,YACvEC,WAAYrB,EAAMW,aAAeL,EAAKM,GAAK,YAAc,YAE1DN,EAAKmB,gBACJxB,2BAAKyB,MAAO,CAAEC,WAAY,GAAIC,QAAS,SACrC,CAAAzB,SAAAF,EAAAO,IAACqB,EAAI,CAACC,KAAK,kBAAkBC,KAAK,QAAQd,MAAOe,WAASC,yBAdjD1B"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { BaseTooltipButtonInterface, BaseTooltipInterface, BaseTooltipPanelInterface } from './BaseTooltip.type';
|
|
2
|
+
declare const BaseTooltip: {
|
|
3
|
+
({ iconTriangleContainerStyles, iconTriangleStyles, panelContainerStyles, offsetX, offsetY, children, position, isAutoFlip, containerStyles }: BaseTooltipInterface): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
Button: {
|
|
5
|
+
({ children }: BaseTooltipButtonInterface): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
displayName: string;
|
|
7
|
+
};
|
|
8
|
+
Panel: {
|
|
9
|
+
({ children }: BaseTooltipPanelInterface): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
displayName: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default BaseTooltip;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),r=require("react"),n=require("../../utils/getChildrenOnDisplayName.js"),i=require("../Icon/Icon.js"),s=require("../Text/BaseText.js");require("../Text/Text.js");var o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),l=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.js"),a=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");const c=({iconTriangleContainerStyles:s,iconTriangleStyles:c,panelContainerStyles:u,offsetX:p=0,offsetY:d=0,children:f,position:m="right-start",isAutoFlip:g,containerStyles:h})=>{const j=r.useRef(null),[x,b]=r.useState(!1),[v,w]=r.useState(!1),y=r.useRef(),N=r.useRef(!1),T=r.useRef(!0),O={"top-start":"justify-center w-full -top-[9px] origin-center -rotate-90",top:"justify-center w-full -top-[9px] origin-center -rotate-90","top-end":"justify-center w-full -top-[9px] origin-center -rotate-90","right-start":"items-center h-full top-0 -right-[9px]",right:"items-center h-full top-0 -right-[9px]","right-end":"items-center h-full top-0 -right-[9px]","bottom-start":"justify-center w-full -bottom-[9px] origin-center rotate-90",bottom:"justify-center w-full -bottom-[9px] origin-center rotate-90","bottom-end":"justify-center w-full -bottom-[9px] origin-center rotate-90","left-start":"items-center h-full origin-center rotate-180 top-0 -left-[9px]",left:"items-center h-full origin-center rotate-180 top-0 -left-[9px]","left-end":"items-center h-full origin-center rotate-180 top-0 -left-[9px]"},q={"top-start":"pb-1.5",top:"pb-1.5","top-end":"pb-1.5","right-start":"pl-1.5",right:"pl-1.5","right-end":"pl-1.5","bottom-start":"pt-1.5",bottom:"pt-1.5","bottom-end":"pt-1.5","left-start":"pr-1.5",left:"pr-1.5","left-end":"pr-1.5"},M=e=>{const[t]=e.split("-");return"right"===t||"left"===t},P=e=>{y.current&&clearTimeout(y.current),y.current=setTimeout((()=>{x||v||N.current||e(),N.current=!1}),100)};return r.useEffect((()=>{var e;T.current?T.current=!1:x||v||null===(e=j.current)||void 0===e||e.click()}),[x,v]),e.jsx(l.Popover,Object.assign({className:o.twMerge("relative",h)},{children:({open:h,close:x})=>e.jsxs(t.Float,Object.assign({placement:m,flip:g,offset:{crossAxis:M(m)?d:p,mainAxis:M(m)?p:d}},{children:[e.jsxs("div",Object.assign({className:"relative"},{children:[e.jsx(l.PopoverButton,Object.assign({ref:j,className:"p-0 bg-transparent outline-none w-full z-10",onMouseEnter:()=>{var e;y.current&&clearTimeout(y.current),b(!0),h||null===(e=j.current)||void 0===e||e.click()},onMouseLeave:()=>{b(!1),P(x)}},{children:n.getChildrenOnDisplayName("function"==typeof f?f({open:h,close:x}):f,"Button")})),h&&e.jsx("div",Object.assign({className:o.twMerge(`absolute flex z-20 transition ease-in duration-100 ${O[m]}`,s)},{children:e.jsx(i,{name:"triangleLeft",className:o.twMerge("w-3 h-3 fill-dark-solitude shadow-lg",c)})}))]})),e.jsx(a.Transition,Object.assign({as:r.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(l.PopoverPanel,Object.assign({className:o.twMerge(`${q[m]}`),onMouseEnter:()=>{y.current&&clearTimeout(y.current),w(!0)},onMouseLeave:e=>{const t=j.current;if(t){const r=t.getBoundingClientRect(),n=e.clientX>=r.left&&e.clientX<=r.right&&e.clientY>=r.top&&e.clientY<=r.bottom;N.current=n}w(!1),P(x)}},{children:e.jsx("div",Object.assign({className:o.twMerge("rounded-lg min-w-0 bg-white flex flex-col overflow-hidden border-dark-silver z-20",u)},{children:n.getChildrenOnDisplayName("function"==typeof f?f({open:h,close:x}):f,"Panel")}))}))}))]}))}))},u=({children:t})=>e.jsx(e.Fragment,{children:t||e.jsx(s.default,{label:"Popover"})});u.displayName="Button",c.Button=u;const p=({children:t})=>e.jsx(e.Fragment,{children:t||e.jsx("div",{className:"w-52 h-52 bg-dark-solitude"})});p.displayName="Panel",c.Panel=p,module.exports=c;
|
|
2
|
+
//# sourceMappingURL=BaseTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseTooltip.js","sources":["../../../../src/components/Tooltip/BaseTooltip.tsx"],"sourcesContent":["import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseTooltipButtonInterface,\n BaseTooltipInterface,\n BaseTooltipPanelInterface,\n PickerPosition\n} from './BaseTooltip.type';\n\nconst BaseTooltip = ({\n iconTriangleContainerStyles,\n iconTriangleStyles,\n panelContainerStyles,\n offsetX = 0,\n offsetY = 0,\n children,\n position = 'right-start',\n isAutoFlip,\n containerStyles\n}: BaseTooltipInterface) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [isButtonHovered, setIsButtonHovered] = useState(false);\n const [isPanelHovered, setIsPanelHovered] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout>();\n const isMovingToButtonRef = useRef(false);\n const isFirstRender = useRef(true);\n\n const TriangleTransformMapper: Record<PickerPosition, string> = {\n 'top-start': 'justify-center w-full -top-[9px] origin-center -rotate-90',\n top: 'justify-center w-full -top-[9px] origin-center -rotate-90',\n 'top-end': 'justify-center w-full -top-[9px] origin-center -rotate-90',\n 'right-start': 'items-center h-full top-0 -right-[9px]',\n right: 'items-center h-full top-0 -right-[9px]',\n 'right-end': 'items-center h-full top-0 -right-[9px]',\n 'bottom-start': 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n bottom: 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n 'bottom-end': 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n 'left-start': 'items-center h-full origin-center rotate-180 top-0 -left-[9px]',\n left: 'items-center h-full origin-center rotate-180 top-0 -left-[9px]',\n 'left-end': 'items-center h-full origin-center rotate-180 top-0 -left-[9px]'\n };\n\n const PickerPositionMapper: Record<PickerPosition, string> = {\n 'top-start': 'pb-1.5',\n top: 'pb-1.5',\n 'top-end': 'pb-1.5',\n 'right-start': 'pl-1.5',\n right: 'pl-1.5',\n 'right-end': 'pl-1.5',\n 'bottom-start': 'pt-1.5',\n bottom: 'pt-1.5',\n 'bottom-end': 'pt-1.5',\n 'left-start': 'pr-1.5',\n left: 'pr-1.5',\n 'left-end': 'pr-1.5'\n };\n\n const checkPosition = (position: string): boolean => {\n const [direction] = position.split('-');\n return direction === 'right' || direction === 'left';\n };\n\n const handleClosePanel = (close: () => void) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n timeoutRef.current = setTimeout(() => {\n if (!isButtonHovered && !isPanelHovered && !isMovingToButtonRef.current) {\n close();\n }\n isMovingToButtonRef.current = false;\n }, 100);\n };\n\n useEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false;\n return;\n }\n\n if (!isButtonHovered && !isPanelHovered) {\n buttonRef.current?.click();\n }\n }, [isButtonHovered, isPanelHovered]);\n\n return (\n <Popover className={twMerge('relative', containerStyles)}>\n {({ open, close }) => (\n <Float\n placement={position}\n flip={isAutoFlip}\n offset={{\n crossAxis: checkPosition(position) ? offsetY : offsetX,\n mainAxis: checkPosition(position) ? offsetX : offsetY\n }}\n >\n <div className='relative'>\n <PopoverButton\n ref={buttonRef}\n className='p-0 bg-transparent outline-none w-full z-10'\n onMouseEnter={() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsButtonHovered(true);\n if (!open) {\n buttonRef.current?.click();\n }\n }}\n onMouseLeave={() => {\n setIsButtonHovered(false);\n handleClosePanel(close);\n }}\n >\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'Button'\n )}\n </PopoverButton>\n {open && (\n <div\n className={twMerge(\n `absolute flex z-20 transition ease-in duration-100 ${TriangleTransformMapper[position]}`,\n iconTriangleContainerStyles\n )}\n >\n <Icon\n name='triangleLeft'\n className={twMerge('w-3 h-3 fill-dark-solitude shadow-lg', iconTriangleStyles)}\n />\n </div>\n )}\n </div>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <PopoverPanel\n className={twMerge(`${PickerPositionMapper[position]}`)}\n onMouseEnter={() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsPanelHovered(true);\n }}\n onMouseLeave={(e) => {\n // Check if we're moving to the button\n const buttonElement = buttonRef.current;\n if (buttonElement) {\n const buttonRect = buttonElement.getBoundingClientRect();\n const isMovingToward =\n e.clientX >= buttonRect.left &&\n e.clientX <= buttonRect.right &&\n e.clientY >= buttonRect.top &&\n e.clientY <= buttonRect.bottom;\n isMovingToButtonRef.current = isMovingToward;\n }\n\n setIsPanelHovered(false);\n handleClosePanel(close);\n }}\n >\n <div\n className={twMerge(\n 'rounded-lg min-w-0 bg-white flex flex-col overflow-hidden border-dark-silver z-20',\n panelContainerStyles\n )}\n >\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'Panel'\n )}\n </div>\n </PopoverPanel>\n </Transition>\n </Float>\n )}\n </Popover>\n );\n};\n\n// Button and Panel components remain unchanged\nconst Button = ({ children }: BaseTooltipButtonInterface) => {\n return <>{children ? children : <BaseText label='Popover' />}</>;\n};\nButton.displayName = 'Button';\nBaseTooltip.Button = Button;\n\nconst Panel = ({ children }: BaseTooltipPanelInterface) => {\n return <>{children ? children : <div className='w-52 h-52 bg-dark-solitude' />}</>;\n};\nPanel.displayName = 'Panel';\nBaseTooltip.Panel = Panel;\n\nexport default BaseTooltip;\n"],"names":["BaseTooltip","iconTriangleContainerStyles","iconTriangleStyles","panelContainerStyles","offsetX","offsetY","children","position","isAutoFlip","containerStyles","buttonRef","useRef","isButtonHovered","setIsButtonHovered","useState","isPanelHovered","setIsPanelHovered","timeoutRef","isMovingToButtonRef","isFirstRender","TriangleTransformMapper","top","right","bottom","left","PickerPositionMapper","checkPosition","direction","split","handleClosePanel","close","current","clearTimeout","setTimeout","useEffect","_a","click","_jsx","Popover","Object","assign","className","twMerge","open","_jsxs","Float","placement","flip","offset","crossAxis","mainAxis","PopoverButton","ref","onMouseEnter","onMouseLeave","getChildrenOnDisplayName","jsx","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","PopoverPanel","e","buttonElement","buttonRect","getBoundingClientRect","isMovingToward","clientX","clientY","Button","BaseText","label","displayName","Panel","_Fragment"],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Placement } from '@floating-ui/dom';
|
|
3
|
+
export type PickerPosition = Placement;
|
|
4
|
+
export type BaseTooltipButtonInterface = {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
};
|
|
7
|
+
export type BaseTooltipPanelInterface = {
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
position?: PickerPosition;
|
|
10
|
+
containerStyles?: string;
|
|
11
|
+
};
|
|
12
|
+
export type BaseTooltipInterface = {
|
|
13
|
+
iconTriangleStyles?: string;
|
|
14
|
+
iconTriangleContainerStyles?: string;
|
|
15
|
+
offsetX?: number;
|
|
16
|
+
offsetY?: number;
|
|
17
|
+
children: React.ReactNode | (({ open, close }: {
|
|
18
|
+
open?: boolean;
|
|
19
|
+
close?: () => void;
|
|
20
|
+
}) => React.ReactNode);
|
|
21
|
+
position?: PickerPosition;
|
|
22
|
+
isAutoFlip?: boolean;
|
|
23
|
+
panelContainerStyles?: string;
|
|
24
|
+
containerStyles?: string;
|
|
25
|
+
};
|
package/build/src/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./blocks/Form/Form.js"),r=require("./blocks/Form/Form.Button.js"),o=require("./blocks/Form/Form.Checkbox.js"),t=require("./blocks/Form/Form.CheckPicker.js"),s=require("./blocks/Form/Form.Date.js"),n=require("./blocks/Form/Form.Group.js"),i=require("./blocks/Form/Form.Input.js"),a=require("./blocks/Form/Form.SelectPicker.js"),c=require("./blocks/Form/Form.Textarea.js"),p=require("./blocks/Form/Form.TimePicker.js"),u=require("./blocks/Navbar/Navbar.js"),m=require("./blocks/Sidebar/Sidebar.js"),x=require("./components/Avatar/Avatar.js"),l=require("./components/Backdrop/Backdrop.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./blocks/Form/Form.js"),r=require("./blocks/Form/Form.Button.js"),o=require("./blocks/Form/Form.Checkbox.js"),t=require("./blocks/Form/Form.CheckPicker.js"),s=require("./blocks/Form/Form.Date.js"),n=require("./blocks/Form/Form.Group.js"),i=require("./blocks/Form/Form.Input.js"),a=require("./blocks/Form/Form.SelectPicker.js"),c=require("./blocks/Form/Form.Textarea.js"),p=require("./blocks/Form/Form.TimePicker.js"),u=require("./blocks/Navbar/Navbar.js"),m=require("./blocks/Sidebar/Sidebar.js"),x=require("./components/Avatar/Avatar.js"),l=require("./components/Backdrop/Backdrop.js"),B=require("./components/Badge/Badge.js"),d=require("./components/Badge/BaseBadge.js"),k=require("./components/Badge/BaseBadgeRequired.js"),j=require("./components/Breadcrumbs/BaseBreadcrumbs.js"),P=require("./components/Breadcrumbs/Breadcrumbs.js"),q=require("./components/Button/ButtonHyperlink.js"),b=require("./components/Button/BaseButton.js"),g=require("./components/Button/BaseButtonIcon.js"),T=require("./components/Button/Button.js"),f=require("./components/Button/ButtonConfirmation.js"),C=require("./components/Button/ButtonLink.js"),F=require("./components/Button/ButtonRipple.js"),I=require("./components/Button/ButtonTailwind.js"),y=require("./components/Card/InfoCard.js"),D=require("./components/Checkbox/Checkbox.js"),h=require("./components/CheckPicker/BaseCheckPicker.js"),R=require("./components/CheckPicker/CheckPicker.js"),S=require("./components/Container/BaseCollapsibleContainer.js"),M=require("./components/DatePicker/BaseDatePicker.js"),w=require("./components/DatePicker/BaseDatePickerRange.js"),v=require("./components/DatePicker/DatePicker.js"),O=require("./components/DatePicker/DatePickerRange.js"),L=require("./components/DatePicker/DatePickerTime.js"),G=require("./components/Heading/Heading.js"),A=require("./components/Icon/Icon.js"),H=require("./components/IconProduct/IconProduct.js"),_=require("./components/Image/Image.js"),E=require("./components/InfoPanel/BaseInfoPanel.js"),N=require("./components/LoadingIndicator/LoadingIndicator.js"),U=require("./components/LoadingIndicator/LoadingIndicatorBox.js"),Y=require("./components/Menu/BaseMenuDropdown.js"),z=require("./components/MessageBox/MessageBox.js"),J=require("./components/Modal/BaseModal.js"),K=require("./components/Modal/Modal.js"),Q=require("./components/Pagination/BasePagination.js"),V=require("./components/Popover/BasePopover.js"),W=require("./components/Preview/BasePreview.js"),X=require("./components/ProgressBar/ProgressBar.js"),Z=require("./components/ProgressIndicator/ProgressIndicator.js"),$=require("./components/RadioButton/RadioButton.js"),ee=require("./components/RadioPicker/BaseRadioPicker.js"),re=require("./components/SelectPicker/BaseSelectPicker.js"),oe=require("./components/SelectPicker/SelectPicker.js"),te=require("./components/Switch/BaseSwitch.js"),se=require("./components/SwitchPicker/BaseSwitchPicker.js"),ne=require("./components/Table/TablePage.js"),ie=require("./components/Table/TableResponsive.js"),ae=require("./components/Tabs/BaseAccordionTabs.js"),ce=require("./components/Tabs/BaseTabs.js"),pe=require("./components/Tabs/Tabs.js"),ue=require("./components/Text/BaseText.js"),me=require("./components/Text/Text.js"),xe=require("./components/Textarea/BaseTextarea.js"),le=require("./components/Textarea/Textarea.js"),Be=require("./components/TextInput/BaseTextInput.js"),de=require("./components/TextInput/TextInput.js"),ke=require("./components/TimePicker/BaseTimePicker.js"),je=require("./components/TimePicker/TimePicker.js"),Pe=require("./components/Toast/Toast.js"),qe=require("./components/ToggleButton/ToggleButton.js"),be=require("./components/Tooltip/BaseTooltip.js"),ge=require("./components/Uploader/BaseUploader.js"),Te=require("./hooks/useClickOutside.js"),fe=require("./hooks/useCombinedRefs.js"),Ce=require("./hooks/useDidMountEffect.js"),Fe=require("./shared/global.js"),Ie=require("./styles/BorderRadius.js"),ye=require("./styles/Colors.js"),De=require("./styles/Spacing.js"),he=require("../node_modules/rsuite/esm/DatePicker/DatePicker.js"),Re=require("../node_modules/rsuite/esm/DateRangePicker/DateRangePicker.js");exports.Form=e.Form,exports.FormButton=r.FormButton,exports.FormCheckbox=o.FormCheckbox,exports.FormCheckPicker=t.FormCheckPicker,exports.FormDatePicker=s.FormDatePicker,exports.FormGroup=n,exports.FormInput=i.FormInput,exports.FormSelectPicker=a.FormSelectPicker,exports.FormTextarea=c.FormTextarea,exports.FormTimePicker=p.FormTimePicker,exports.Navbar=u,exports.Sidebar=m,exports.Avatar=x,exports.Backdrop=l,exports.Badge=B,exports.BaseBadge=d,exports.BaseBadgeRequired=k,exports.BaseBreadcrumbs=j,exports.Breadcrumbs=P,exports.ButtonHyperlink=q,exports.BaseButton=b.default,exports.BaseButtonIcon=g.default,exports.Button=T.default,exports.ButtonConfirmation=f,exports.ButtonLink=C,exports.ButtonRipple=F.default,exports.ButtonTailwind=I,exports.InfoCard=y,exports.Checkbox=D,exports.BaseCheckPicker=h,exports.CheckPicker=R,exports.BaseCollapsibleContainer=S,exports.BaseDatePicker=M,exports.BaseDatePickerRange=w,exports.DatePicker=v.default,exports.DatePickerRange=O.default,exports.DatePickerTime=L,exports.Heading=G,exports.Icon=A,exports.IconProduct=H,exports.Image=_,exports.BaseInfoPanel=E,exports.LoadingIndicator=N,exports.LoadingIndicatorBox=U,exports.BaseMenuDropdown=Y,exports.MessageBox=z.MessageBox,exports.MessageBoxBackdrop=z.MessageBoxBackdrop,exports.BaseModal=J,exports.Modal=K,exports.BasePagination=Q,exports.BasePopover=V,exports.BasePreview=W,exports.ProgressBar=X,exports.ProgressIndicator=Z,exports.RadioButton=$,exports.BaseRadioPicker=ee,exports.BaseSelectPicker=re,exports.SelectPicker=oe,exports.BaseSwitch=te,exports.BaseSwitchPicker=se,exports.TablePage=ne,exports.TableResponsive=ie,exports.BaseAccordionTabs=ae,exports.BaseTabs=ce,exports.Tabs=pe,exports.BaseText=ue.default,exports.Text=me.default,exports.fontFamilyMapper=me.fontFamilyMapper,exports.BaseTextarea=xe,exports.Textarea=le,exports.BaseTextInput=Be,exports.TextInput=de,exports.BaseTimePicker=ke,exports.TimePicker=je,exports.Toast=Pe.Toast,exports.showToast=Pe.showToast,exports.ToggleButton=qe,exports.BaseTooltip=be,exports.BaseUploader=ge,exports.useClickOutside=Te.useClickOutside,exports.useCombinedRefs=fe.useCombinedRefs,exports.useDidMountEffect=Ce.useDidMountEffect,exports.GlobalStyle=Fe.GlobalStyle,exports.bodyStyles=Fe.bodyStyles,Object.defineProperty(exports,"BorderRadiusType",{enumerable:!0,get:function(){return Ie.BorderRadiusType}}),Object.defineProperty(exports,"ColorBlue",{enumerable:!0,get:function(){return ye.ColorBlue}}),Object.defineProperty(exports,"ColorDark",{enumerable:!0,get:function(){return ye.ColorDark}}),Object.defineProperty(exports,"ColorGreen",{enumerable:!0,get:function(){return ye.ColorGreen}}),Object.defineProperty(exports,"ColorLight",{enumerable:!0,get:function(){return ye.ColorLight}}),Object.defineProperty(exports,"ColorRed",{enumerable:!0,get:function(){return ye.ColorRed}}),Object.defineProperty(exports,"ColorSolid",{enumerable:!0,get:function(){return ye.ColorSolid}}),Object.defineProperty(exports,"ColorTeal",{enumerable:!0,get:function(){return ye.ColorTeal}}),Object.defineProperty(exports,"ColorYellow",{enumerable:!0,get:function(){return ye.ColorYellow}}),Object.defineProperty(exports,"MarginType",{enumerable:!0,get:function(){return De.MarginType}}),Object.defineProperty(exports,"PaddingType",{enumerable:!0,get:function(){return De.PaddingType}}),exports.DatePickerRsuite=he,exports.DateRangePickerRsuite=Re;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|