pixelize-design-library 1.0.59 → 1.0.61

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/README.md CHANGED
@@ -24,6 +24,8 @@ install before make a setup pixelize-authenticator library
24
24
 
25
25
  PixelizeDesign Library Components Are Below
26
26
 
27
+ - Accordion,
28
+ - AlertDialog, \* New
27
29
  - ApexBarChart,
28
30
  - ApexPieChart,
29
31
  - Breadcrumbs,
@@ -1,3 +1,4 @@
1
1
  import React from "react";
2
2
  import { AccordionProps } from "./AccordionProps";
3
- export declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => React.JSX.Element;
3
+ declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => React.JSX.Element;
4
+ export default Accordion;
@@ -25,7 +25,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
25
25
  return (mod && mod.__esModule) ? mod : { "default": mod };
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
- exports.Accordion = void 0;
29
28
  var react_1 = __importDefault(require("react"));
30
29
  var react_2 = require("@chakra-ui/react");
31
30
  var Accordion = function (_a) {
@@ -38,4 +37,4 @@ var Accordion = function (_a) {
38
37
  react_1.default.createElement(react_2.AccordionPanel, __assign({}, item.panelProps, { sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle }), item.content)));
39
38
  })));
40
39
  };
41
- exports.Accordion = Accordion;
40
+ exports.default = Accordion;
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { AlertDialogsProps } from "./AlertDialogProps";
3
- declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, }: AlertDialogsProps) => React.JSX.Element;
3
+ declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key }: AlertDialogsProps) => React.JSX.Element;
4
4
  export default AlertDialog;
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = require("@chakra-ui/react");
7
7
  var react_2 = __importDefault(require("react"));
8
8
  var AlertDialog = function (_a) {
9
- var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style;
10
- return (react_2.default.createElement(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: true },
9
+ var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, key = _a.key;
10
+ return (react_2.default.createElement(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, key: key },
11
11
  react_2.default.createElement(react_1.AlertDialogOverlay, null),
12
12
  react_2.default.createElement(react_1.AlertDialogContent, null,
13
13
  react_2.default.createElement(react_1.AlertDialogHeader, { sx: headerStyle }, title),
@@ -14,4 +14,5 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
14
14
  closeButtonStyle?: React.CSSProperties;
15
15
  button1Style?: React.CSSProperties;
16
16
  button2Style?: React.CSSProperties;
17
+ key?: string | number;
17
18
  };
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { DropdownProps } from "./DropdownProps";
3
- declare const Dropdown: ({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType, text, DropdownIcon, isVisibleIconShow, buttonProps, }: DropdownProps) => React.JSX.Element;
3
+ declare const Dropdown: ({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType, text, DropdownIcon, isVisibleIconShow, buttonProps, position, }: DropdownProps) => React.JSX.Element;
4
4
  export default Dropdown;
@@ -40,7 +40,7 @@ var fi_1 = require("react-icons/fi");
40
40
  var framer_motion_1 = require("framer-motion");
41
41
  var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
42
42
  var Dropdown = function (_a) {
43
- var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps;
43
+ var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, position = _a.position;
44
44
  var _d = (0, react_2.useDisclosure)(), isOpen = _d.isOpen, onToggle = _d.onToggle, onClose = _d.onClose;
45
45
  var dropdownRef = (0, react_1.useRef)(null);
46
46
  var handleListItemClick = function (optionId, optionLabel) {
@@ -79,6 +79,6 @@ var Dropdown = function (_a) {
79
79
  };
80
80
  return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", width: "100%" },
81
81
  dropDownToggleOption(),
82
- isOpen && (react_1.default.createElement(MotionBox, { position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 } }, DropdownContentRender()))));
82
+ isOpen && (react_1.default.createElement(MotionBox, { position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, style: position }, DropdownContentRender()))));
83
83
  };
84
84
  exports.default = Dropdown;
@@ -10,6 +10,12 @@ export type DropdownProps = {
10
10
  dropDownButtonStyle?: React.CSSProperties;
11
11
  isVisibleIconShow?: boolean;
12
12
  buttonProps?: ButtonProps;
13
+ position?: {
14
+ top?: string;
15
+ bottom?: string;
16
+ left?: string;
17
+ right?: string;
18
+ };
13
19
  };
14
20
  type Option = {
15
21
  id: string | number;
package/dist/Layout.js CHANGED
@@ -73,7 +73,7 @@ var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker")
73
73
  var Search_1 = __importDefault(require("./Components/Search/Search"));
74
74
  var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));
75
75
  var SelectSearch_1 = __importDefault(require("./Components/SelectSearch/SelectSearch"));
76
- var Accordion_1 = require("./Components/Accordion/Accordion");
76
+ var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
77
77
  var fa_1 = require("react-icons/fa");
78
78
  var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
79
79
  var Layout = function () {
@@ -617,7 +617,7 @@ var Layout = function () {
617
617
  react_2.default.createElement("br", null),
618
618
  react_2.default.createElement("br", null),
619
619
  react_2.default.createElement(react_1.Text, null, "Accordion"),
620
- react_2.default.createElement(Accordion_1.Accordion, { allowToggle: true, items: [
620
+ react_2.default.createElement(Accordion_1.default, { allowToggle: true, items: [
621
621
  {
622
622
  header: (react_2.default.createElement(react_2.default.Fragment, null,
623
623
  react_2.default.createElement(react_1.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import Accordian from "./Components/Accordion/Accordion";
2
+ import AlertDialog from "./Components/AlertDialog/AlertDialog";
1
3
  import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
2
4
  import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
3
5
  import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
@@ -33,4 +35,4 @@ import Timeline from "./Components/Timeline/Timeline";
33
35
  import Toaster, { useToaster } from "./Components/Toaster/Toaster";
34
36
  import ToolTip from "./Components/ToolTip/ToolTip";
35
37
  import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
36
- export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
38
+ export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, };
package/dist/index.js CHANGED
@@ -27,7 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  return (mod && mod.__esModule) ? mod : { "default": mod };
28
28
  };
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
- exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
30
+ exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
31
+ var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
32
+ exports.Accordian = Accordion_1.default;
33
+ var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
34
+ exports.AlertDialog = AlertDialog_1.default;
31
35
  var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
32
36
  exports.ApexBarChart = ApexBarChart_1.default;
33
37
  var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.0.59",
3
+ "version": "1.0.61",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",