@dktunited-techoff/techoff-suite-ui 0.9.0 → 0.9.2

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.
Files changed (35) hide show
  1. package/esm/components/Inputs/TextInput/TextInput.types.d.ts +2 -2
  2. package/esm/components/Inputs/TextInput/TextInput.types.ts +2 -2
  3. package/esm/components/Select/Select.types.d.ts +2 -2
  4. package/esm/layouts/Header/Header.js +2 -1
  5. package/esm/layouts/Header/Header.js.map +1 -1
  6. package/esm/layouts/Header/Header.types.d.ts +2 -2
  7. package/esm/layouts/Navigation/Navigation.js +2 -1
  8. package/esm/layouts/Navigation/Navigation.js.map +1 -1
  9. package/esm/layouts/Navigation/Navigation.types.d.ts +3 -3
  10. package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx +1 -1
  11. package/lib/components/Inputs/TextInput/TextInput.types.d.ts +2 -2
  12. package/lib/components/Inputs/TextInput/TextInput.types.ts +2 -2
  13. package/lib/components/Select/Select.types.d.ts +2 -2
  14. package/lib/layouts/Header/Header.js +2 -1
  15. package/lib/layouts/Header/Header.js.map +1 -1
  16. package/lib/layouts/Header/Header.types.d.ts +2 -2
  17. package/lib/layouts/Navigation/Navigation.js +2 -1
  18. package/lib/layouts/Navigation/Navigation.js.map +1 -1
  19. package/lib/layouts/Navigation/Navigation.types.d.ts +3 -3
  20. package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx +1 -1
  21. package/package.json +1 -1
  22. package/src/components/Inputs/TextInput/TextInput.types.ts +2 -2
  23. package/src/components/Select/Select.types.ts +2 -2
  24. package/src/layouts/Header/Header.tsx +4 -1
  25. package/src/layouts/Header/Header.types.ts +5 -2
  26. package/src/layouts/Navigation/Navigation.tsx +4 -2
  27. package/src/layouts/Navigation/Navigation.types.ts +2 -2
  28. package/src/layouts/Navigation/__stories__/Navigation.stories.mdx +1 -1
  29. package/esm/utils/validator.utils.d.ts +0 -2
  30. package/esm/utils/validator.utils.js +0 -5
  31. package/esm/utils/validator.utils.js.map +0 -1
  32. package/lib/utils/validator.utils.d.ts +0 -2
  33. package/lib/utils/validator.utils.js +0 -9
  34. package/lib/utils/validator.utils.js.map +0 -1
  35. package/src/utils/validator.utils.ts +0 -8
package/esm/components/Inputs/TextInput/TextInput.types.d.ts CHANGED
@@ -6,7 +6,7 @@ export type TextInputProps = {
6
6
  value: string;
7
7
  autofocus?: boolean;
8
8
  disabled?: boolean;
9
- onBlur: () => void;
9
+ onBlur?: () => void;
10
10
  onChange: (value: string) => void;
11
- onFocus: () => void;
11
+ onFocus?: () => void;
12
12
  };
package/esm/components/Inputs/TextInput/TextInput.types.ts CHANGED
@@ -6,7 +6,7 @@ export type TextInputProps = {
6
6
  value: string;
7
7
  autofocus?: boolean;
8
8
  disabled?: boolean;
9
- onBlur: () => void;
9
+ onBlur?: () => void;
10
10
  onChange: (value: string) => void;
11
- onFocus: () => void;
11
+ onFocus?: () => void;
12
12
  };
package/esm/components/Select/Select.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
  export type SelectProps = {
3
3
  label?: string;
4
- options: ReactNode[];
4
+ options: ReactElement[];
5
5
  onChange: (val: string) => void;
6
6
  };
package/esm/layouts/Header/Header.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { cloneElement } from 'react';
2
3
  import { icons } from '../../components/Icon/icons';
3
4
  import './Header.css';
4
5
  export const Header = ({ actions, appName }) => {
@@ -8,6 +9,6 @@ export const Header = ({ actions, appName }) => {
8
9
  React.createElement("div", { className: "header-left-side" },
9
10
  React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons[`header-${appName}`] } })),
10
11
  React.createElement("div", null,
11
- React.createElement("div", { className: "header-actions" }, actions))));
12
+ React.createElement("div", { className: "header-actions" }, actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))))));
12
13
  };
13
14
  //# sourceMappingURL=Header.js.map
package/esm/layouts/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAO,CAC3C,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEpD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}
package/esm/layouts/Header/Header.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
  export type HeaderProps = {
3
- actions: ReactNode[];
3
+ actions: ReactElement[];
4
4
  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
5
5
  };
6
6
  export type HeaderProfileProps = {
package/esm/layouts/Navigation/Navigation.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { cloneElement } from 'react';
2
3
  import { Icon } from '../../components/Icon/Icon';
3
4
  import './Navigation.css';
4
5
  export const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
@@ -21,6 +22,6 @@ export const Navigation = ({ actions, breadcrumbs }) => {
21
22
  index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
22
23
  React.createElement(Icon, { name: "chevron-right" }))))))),
23
24
  React.createElement("div", { className: "navigation-divider" }),
24
- React.createElement("div", { className: "navigation-actions" }, actions)));
25
+ React.createElement("div", { className: "navigation-actions" }, actions.map((action, index) => cloneElement(action, { key: index, ...action.props })))));
25
26
  };
26
27
  //# sourceMappingURL=Navigation.js.map
package/esm/layouts/Navigation/Navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/layouts/Navigation/Navigation.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
  export type NavigationProps = {
3
- actions: ReactNode[];
4
- breadcrumbs: ReactNode[];
3
+ actions: ReactElement[];
4
+ breadcrumbs: ReactElement[];
5
5
  };
6
6
  export type NavigationBreadcrumbItemProps = {
7
7
  icon?: string;
package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -20,7 +20,7 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
20
20
  <Button icon="check" onClick={() => {}}>
21
21
  Action 1
22
22
  </Button>,
23
- <Button icon="plus" onClick={() => {}}>
23
+ <Button icon="add" onClick={() => {}}>
24
24
  Action 2
25
25
  </Button>,
26
26
  ],
package/lib/components/Inputs/TextInput/TextInput.types.d.ts CHANGED
@@ -6,7 +6,7 @@ export type TextInputProps = {
6
6
  value: string;
7
7
  autofocus?: boolean;
8
8
  disabled?: boolean;
9
- onBlur: () => void;
9
+ onBlur?: () => void;
10
10
  onChange: (value: string) => void;
11
- onFocus: () => void;
11
+ onFocus?: () => void;
12
12
  };
package/lib/components/Inputs/TextInput/TextInput.types.ts CHANGED
@@ -6,7 +6,7 @@ export type TextInputProps = {
6
6
  value: string;
7
7
  autofocus?: boolean;
8
8
  disabled?: boolean;
9
- onBlur: () => void;
9
+ onBlur?: () => void;
10
10
  onChange: (value: string) => void;
11
- onFocus: () => void;
11
+ onFocus?: () => void;
12
12
  };
package/lib/components/Select/Select.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
  export type SelectProps = {
3
3
  label?: string;
4
- options: ReactNode[];
4
+ options: ReactElement[];
5
5
  onChange: (val: string) => void;
6
6
  };
package/lib/layouts/Header/Header.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Header = void 0;
4
4
  const React = require("react");
5
+ const react_1 = require("react");
5
6
  const icons_1 = require("../../components/Icon/icons");
6
7
  require("./Header.css");
7
8
  const Header = ({ actions, appName }) => {
@@ -11,7 +12,7 @@ const Header = ({ actions, appName }) => {
11
12
  React.createElement("div", { className: "header-left-side" },
12
13
  React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: icons_1.icons[`header-${appName}`] } })),
13
14
  React.createElement("div", null,
14
- React.createElement("div", { className: "header-actions" }, actions))));
15
+ React.createElement("div", { className: "header-actions" }, actions.map((action, index) => (0, react_1.cloneElement)(action, { key: index, ...action.props }))))));
15
16
  };
16
17
  exports.Header = Header;
17
18
  //# sourceMappingURL=Header.js.map
package/lib/layouts/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,uDAAoD;AAEpD,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAO,CAC3C,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,MAAM,UAajB"}
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAqC;AACrC,uDAAoD;AAEpD,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAC/F;QACN;YACE,6BAAK,SAAS,EAAC,gBAAgB,IAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,MAAM,UAejB"}
package/lib/layouts/Header/Header.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
  export type HeaderProps = {
3
- actions: ReactNode[];
3
+ actions: ReactElement[];
4
4
  appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
5
5
  };
6
6
  export type HeaderProfileProps = {
package/lib/layouts/Navigation/Navigation.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Navigation = exports.NavigationBreadcrumbItem = void 0;
4
4
  const React = require("react");
5
+ const react_1 = require("react");
5
6
  const Icon_1 = require("../../components/Icon/Icon");
6
7
  require("./Navigation.css");
7
8
  const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
@@ -25,7 +26,7 @@ const Navigation = ({ actions, breadcrumbs }) => {
25
26
  index !== breadcrumbs.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
26
27
  React.createElement(Icon_1.Icon, { name: "chevron-right" }))))))),
27
28
  React.createElement("div", { className: "navigation-divider" }),
28
- React.createElement("div", { className: "navigation-actions" }, actions)));
29
+ React.createElement("div", { className: "navigation-actions" }, actions.map((action, index) => (0, react_1.cloneElement)(action, { key: index, ...action.props })))));
29
30
  };
30
31
  exports.Navigation = Navigation;
31
32
  //# sourceMappingURL=Navigation.js.map
package/lib/layouts/Navigation/Navigation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,qDAAkD;AAElD,4BAA0B;AAEnB,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,UAAU,cAsBrB"}
1
+ {"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAwD;AACxD,qDAAkD;AAElD,4BAA0B;AAEnB,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;YAC9C,UAAU;YAEV,KAAK,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE;QACN,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,MAAM,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAClF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,UAAU,cAwBrB"}
package/lib/layouts/Navigation/Navigation.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
  export type NavigationProps = {
3
- actions: ReactNode[];
4
- breadcrumbs: ReactNode[];
3
+ actions: ReactElement[];
4
+ breadcrumbs: ReactElement[];
5
5
  };
6
6
  export type NavigationBreadcrumbItemProps = {
7
7
  icon?: string;
package/lib/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -20,7 +20,7 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
20
20
  <Button icon="check" onClick={() => {}}>
21
21
  Action 1
22
22
  </Button>,
23
- <Button icon="plus" onClick={() => {}}>
23
+ <Button icon="add" onClick={() => {}}>
24
24
  Action 2
25
25
  </Button>,
26
26
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "0.9.0",
3
+ "version": "0.9.2",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/Inputs/TextInput/TextInput.types.ts CHANGED
@@ -6,7 +6,7 @@ export type TextInputProps = {
6
6
  value: string;
7
7
  autofocus?: boolean;
8
8
  disabled?: boolean;
9
- onBlur: () => void;
9
+ onBlur?: () => void;
10
10
  onChange: (value: string) => void;
11
- onFocus: () => void;
11
+ onFocus?: () => void;
12
12
  };
package/src/components/Select/Select.types.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
 
3
- export type SelectProps = { label?: string; options: ReactNode[]; onChange: (val: string) => void };
3
+ export type SelectProps = { label?: string; options: ReactElement[]; onChange: (val: string) => void };
package/src/layouts/Header/Header.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { cloneElement } from 'react';
2
3
  import { icons } from '../../components/Icon/icons';
3
4
  import { HeaderProps } from './Header.types';
4
5
  import './Header.css';
@@ -12,7 +13,9 @@ export const Header = ({ actions, appName }: HeaderProps) => {
12
13
  <div className="header-techoff" dangerouslySetInnerHTML={{ __html: icons[`header-${appName}`] }} />
13
14
  </div>
14
15
  <div>
15
- <div className="header-actions">{actions}</div>
16
+ <div className="header-actions">
17
+ {actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))}
18
+ </div>
16
19
  </div>
17
20
  </header>
18
21
  );
package/src/layouts/Header/Header.types.ts CHANGED
@@ -1,4 +1,7 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
 
3
- export type HeaderProps = { actions: ReactNode[]; appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability' };
3
+ export type HeaderProps = {
4
+ actions: ReactElement[];
5
+ appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
6
+ };
4
7
  export type HeaderProfileProps = { firstname: string; lastname: string; supportLink?: string };
package/src/layouts/Navigation/Navigation.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { PropsWithChildren } from 'react';
2
+ import { cloneElement, PropsWithChildren } from 'react';
3
3
  import { Icon } from '../../components/Icon/Icon';
4
4
  import { NavigationBreadcrumbItemProps, NavigationProps } from './Navigation.types';
5
5
  import './Navigation.css';
@@ -50,7 +50,9 @@ export const Navigation = ({ actions, breadcrumbs }: NavigationProps) => {
50
50
  ))}
51
51
  </div>
52
52
  <div className="navigation-divider" />
53
- <div className="navigation-actions">{actions}</div>
53
+ <div className="navigation-actions">
54
+ {actions.map((action, index) => cloneElement(action, { key: index, ...action.props }))}
55
+ </div>
54
56
  </div>
55
57
  );
56
58
  };
package/src/layouts/Navigation/Navigation.types.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
 
3
- export type NavigationProps = { actions: ReactNode[]; breadcrumbs: ReactNode[] };
3
+ export type NavigationProps = { actions: ReactElement[]; breadcrumbs: ReactElement[] };
4
4
  export type NavigationBreadcrumbItemProps = { icon?: string; highlight?: boolean; onClick?: () => void };
package/src/layouts/Navigation/__stories__/Navigation.stories.mdx CHANGED
@@ -20,7 +20,7 @@ Breadcrumbs are an important navigation component that shows content hierarchy.
20
20
  <Button icon="check" onClick={() => {}}>
21
21
  Action 1
22
22
  </Button>,
23
- <Button icon="plus" onClick={() => {}}>
23
+ <Button icon="add" onClick={() => {}}>
24
24
  Action 2
25
25
  </Button>,
26
26
  ],
package/esm/utils/validator.utils.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { JSXElementConstructor, ReactElement, ReactNode, ReactPortal } from 'react';
2
- export declare const isSuiteElement: (element: string | number | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal, name: string) => boolean;
package/esm/utils/validator.utils.js DELETED
@@ -1,5 +0,0 @@
1
- import { isValidElement } from 'react';
2
- export const isSuiteElement = (element, name) => {
3
- return isValidElement(element) && typeof element.type === 'function' && element.type.name === name;
4
- };
5
- //# sourceMappingURL=validator.utils.js.map
package/esm/utils/validator.utils.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"validator.utils.js","sourceRoot":"","sources":["../../src/utils/validator.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+D,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpG,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,OAAqH,EACrH,IAAY,EACZ,EAAE;IACF,OAAO,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;AACrG,CAAC,CAAC"}
package/lib/utils/validator.utils.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { JSXElementConstructor, ReactElement, ReactNode, ReactPortal } from 'react';
2
- export declare const isSuiteElement: (element: string | number | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal, name: string) => boolean;
package/lib/utils/validator.utils.js DELETED
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.isSuiteElement = void 0;
4
- const react_1 = require("react");
5
- const isSuiteElement = (element, name) => {
6
- return (0, react_1.isValidElement)(element) && typeof element.type === 'function' && element.type.name === name;
7
- };
8
- exports.isSuiteElement = isSuiteElement;
9
- //# sourceMappingURL=validator.utils.js.map
package/lib/utils/validator.utils.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"validator.utils.js","sourceRoot":"","sources":["../../src/utils/validator.utils.ts"],"names":[],"mappings":";;;AAAA,iCAAoG;AAE7F,MAAM,cAAc,GAAG,CAC5B,OAAqH,EACrH,IAAY,EACZ,EAAE;IACF,OAAO,IAAA,sBAAc,EAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;AACrG,CAAC,CAAC;AALW,QAAA,cAAc,kBAKzB"}
package/src/utils/validator.utils.ts DELETED
@@ -1,8 +0,0 @@
1
- import { JSXElementConstructor, ReactElement, ReactNode, ReactPortal, isValidElement } from 'react';
2
-
3
- export const isSuiteElement = (
4
- element: string | number | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal,
5
- name: string,
6
- ) => {
7
- return isValidElement(element) && typeof element.type === 'function' && element.type.name === name;
8
- };