@ncds/ui-admin 0.0.18 → 0.0.19

package/dist/cjs/{ui-admin/index.js → index.js}

@@ -146,17 +146,6 @@ Object.keys(_spinner).forEach(function (key) {
     }
   });
 });
-var _svg = require("./src/components/svg");
-Object.keys(_svg).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _svg[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _svg[key];
-    }
-  });
-});
 var _toggle = require("./src/components/toggle");
 Object.keys(_toggle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/{ui-admin/src → src}/components/carousel/CarouselArrow.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CarouselArrow = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _svg = require("../svg");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -31,10 +31,10 @@ var CarouselArrow = function (_a) {
     className: (0, _classnames.default)('ncua-carousel-arrow', (_b = {}, _b["ncua-carousel-arrow--".concat(type)] = type, _b["ncua-carousel-arrow--".concat(size)] = size, _b["ncua-carousel-arrow--".concat(chevron)] = chevron, _b), className),
     onClick: onClick
   }, {
-    children: (0, _jsxRuntime.jsx)(_svg.SvgIcon, {
+    children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
       className: "ncua-carousel-arrow__icon",
-      color: "gray500",
-      icon: chevron === 'left' ? 'chevronLeft' : 'chevronRight'
+      color: "var(--gray-500)",
+      name: chevron === 'left' ? 'chevron-left' : 'chevron-right'
     })
   }));
 };

package/dist/cjs/src/components/dropdown/Dropdown.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _react = require("react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var Dropdown = function (_a) {
+  var trigger = _a.trigger,
+    _b = _a.align,
+    align = _b === void 0 ? 'left' : _b,
+    header = _a.header,
+    groups = _a.groups,
+    className = _a.className;
+  var _c = (0, _react.useState)(false),
+    isOpen = _c[0],
+    setIsOpen = _c[1];
+  var dropdownRef = (0, _react.useRef)(null);
+  var toggleDropdown = function () {
+    setIsOpen(!isOpen);
+  };
+  var handleClickOutside = function (event) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  var handleClickItem = function (item) {
+    if (!item.disabled && item.onClick) {
+      item.onClick();
+      setIsOpen(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var renderTrigger = function () {
+    switch (trigger.type) {
+      case 'custom':
+        return (0, _jsxRuntime.jsx)("button", __assign({
+          className: "ncua-dropdown__trigger",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.children
+        }));
+      case 'icon':
+        return (0, _jsxRuntime.jsx)("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.icon ? (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+            name: trigger.icon
+          }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+            name: "dots-vertical"
+          })
+        }));
+      case 'avatar':
+        return (0, _jsxRuntime.jsx)("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
+          onClick: toggleDropdown
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-dropdown__avatar"
+          }, {
+            children: (0, _jsxRuntime.jsx)("img", {
+              src: trigger.avatar,
+              alt: "avatar"
+            })
+          }))
+        }));
+      case 'button':
+        return (0, _jsxRuntime.jsx)("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--button",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.text
+        }));
+      default:
+        return null;
+    }
+  };
+  var renderHeader = function () {
+    if (!header) return null;
+    if (header.type === 'avatar' && header.avatar) {
+      return (0, _jsxRuntime.jsx)("div", __assign({
+        className: "ncua-dropdown__header"
+      }, {
+        children: (0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-dropdown__header-avatar-group"
+        }, {
+          children: [(0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-dropdown__avatar"
+          }, {
+            children: (0, _jsxRuntime.jsx)("img", {
+              src: header.avatar,
+              alt: "avatar"
+            })
+          })), (0, _jsxRuntime.jsxs)("div", __assign({
+            className: "ncua-dropdown__header-text"
+          }, {
+            children: [header.title && (0, _jsxRuntime.jsx)("div", __assign({
+              className: "ncua-dropdown__header-title"
+            }, {
+              children: header.title
+            })), header.subtitle && (0, _jsxRuntime.jsx)("div", __assign({
+              className: "ncua-dropdown__header-subtitle"
+            }, {
+              children: header.subtitle
+            }))]
+          }))]
+        }))
+      }));
+    }
+    if (header.type === 'text' && header.title) {
+      return (0, _jsxRuntime.jsx)("div", __assign({
+        className: "ncua-dropdown__header"
+      }, {
+        children: (0, _jsxRuntime.jsx)("div", __assign({
+          className: "ncua-dropdown__header-title"
+        }, {
+          children: header.title
+        }))
+      }));
+    }
+    return null;
+  };
+  var renderItem = function (item) {
+    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : ''].filter(Boolean).join(' ');
+    return (0, _jsxRuntime.jsxs)("div", __assign({
+      className: itemClasses
+    }, {
+      children: [(0, _jsxRuntime.jsx)("button", {
+        className: "ncua-dropdown__item-clickable-layer",
+        onClick: function () {
+          return handleClickItem(item);
+        }
+      }), (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-dropdown__item-content"
+      }, {
+        children: [(0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-dropdown__item-text-group"
+        }, {
+          children: [item.icon && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+            name: item.icon,
+            className: "ncua-dropdown__item-icon"
+          }), (0, _jsxRuntime.jsx)("span", __assign({
+            className: "ncua-dropdown__item-text"
+          }, {
+            children: item.text
+          }))]
+        })), item.shortcut && (0, _jsxRuntime.jsx)("span", __assign({
+          className: "ncua-dropdown__item-shortcut"
+        }, {
+          children: item.shortcut
+        }))]
+      }))]
+    }), item.id);
+  };
+  var dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: dropdownClasses,
+    ref: dropdownRef
+  }, {
+    children: [renderTrigger(), isOpen && (0, _jsxRuntime.jsxs)("div", __assign({
+      className: "ncua-dropdown__menu"
+    }, {
+      children: [renderHeader(), (0, _jsxRuntime.jsx)("div", __assign({
+        className: "ncua-dropdown__menu-items"
+      }, {
+        children: groups.map(function (group, index) {
+          return (0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-dropdown__group"
+          }, {
+            children: group.items.map(renderItem)
+          }), index);
+        })
+      }))]
+    }))]
+  }));
+};
+exports.Dropdown = Dropdown;

package/dist/cjs/src/components/dropdown/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Dropdown = require("./Dropdown");
+Object.keys(_Dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Dropdown[key];
+    }
+  });
+});

package/dist/cjs/{ui-admin/src → src}/components/index.js

@@ -124,17 +124,6 @@ Object.keys(_spinner).forEach(function (key) {
     }
   });
 });
-var _svg = require("./svg");
-Object.keys(_svg).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _svg[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _svg[key];
-    }
-  });
-});
 var _toggle = require("./toggle");
 Object.keys(_toggle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/esm/{ui-admin/index.js → index.js}

@@ -11,7 +11,6 @@ export * from './src/components/shared/hintText';
 export * from './src/components/shared/label';
 export * from './src/components/shared';
 export * from './src/components/spinner';
-export * from './src/components/svg';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';

package/dist/esm/{ui-admin/src → src}/components/carousel/CarouselArrow.js

@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { SvgIcon } from '../svg';
+import Icon from '@ncds/ui-admin-icon';
 export var CarouselArrow = function (_a) {
   var _b;
   var _c = _a.type,
@@ -24,10 +24,10 @@ export var CarouselArrow = function (_a) {
     className: classNames('ncua-carousel-arrow', (_b = {}, _b["ncua-carousel-arrow--".concat(type)] = type, _b["ncua-carousel-arrow--".concat(size)] = size, _b["ncua-carousel-arrow--".concat(chevron)] = chevron, _b), className),
     onClick: onClick
   }, {
-    children: _jsx(SvgIcon, {
+    children: _jsx(Icon, {
       className: "ncua-carousel-arrow__icon",
-      color: "gray500",
-      icon: chevron === 'left' ? 'chevronLeft' : 'chevronRight'
+      color: "var(--gray-500)",
+      name: chevron === 'left' ? 'chevron-left' : 'chevron-right'
     })
   }));
 };

package/dist/esm/src/components/dropdown/Dropdown.js

@@ -0,0 +1,188 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import { useEffect, useRef, useState } from 'react';
+export var Dropdown = function (_a) {
+  var trigger = _a.trigger,
+    _b = _a.align,
+    align = _b === void 0 ? 'left' : _b,
+    header = _a.header,
+    groups = _a.groups,
+    className = _a.className;
+  var _c = useState(false),
+    isOpen = _c[0],
+    setIsOpen = _c[1];
+  var dropdownRef = useRef(null);
+  var toggleDropdown = function () {
+    setIsOpen(!isOpen);
+  };
+  var handleClickOutside = function (event) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  var handleClickItem = function (item) {
+    if (!item.disabled && item.onClick) {
+      item.onClick();
+      setIsOpen(false);
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var renderTrigger = function () {
+    switch (trigger.type) {
+      case 'custom':
+        return _jsx("button", __assign({
+          className: "ncua-dropdown__trigger",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.children
+        }));
+      case 'icon':
+        return _jsx("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.icon ? _jsx(Icon, {
+            name: trigger.icon
+          }) : _jsx(Icon, {
+            name: "dots-vertical"
+          })
+        }));
+      case 'avatar':
+        return _jsx("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
+          onClick: toggleDropdown
+        }, {
+          children: _jsx("div", __assign({
+            className: "ncua-dropdown__avatar"
+          }, {
+            children: _jsx("img", {
+              src: trigger.avatar,
+              alt: "avatar"
+            })
+          }))
+        }));
+      case 'button':
+        return _jsx("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--button",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.text
+        }));
+      default:
+        return null;
+    }
+  };
+  var renderHeader = function () {
+    if (!header) return null;
+    if (header.type === 'avatar' && header.avatar) {
+      return _jsx("div", __assign({
+        className: "ncua-dropdown__header"
+      }, {
+        children: _jsxs("div", __assign({
+          className: "ncua-dropdown__header-avatar-group"
+        }, {
+          children: [_jsx("div", __assign({
+            className: "ncua-dropdown__avatar"
+          }, {
+            children: _jsx("img", {
+              src: header.avatar,
+              alt: "avatar"
+            })
+          })), _jsxs("div", __assign({
+            className: "ncua-dropdown__header-text"
+          }, {
+            children: [header.title && _jsx("div", __assign({
+              className: "ncua-dropdown__header-title"
+            }, {
+              children: header.title
+            })), header.subtitle && _jsx("div", __assign({
+              className: "ncua-dropdown__header-subtitle"
+            }, {
+              children: header.subtitle
+            }))]
+          }))]
+        }))
+      }));
+    }
+    if (header.type === 'text' && header.title) {
+      return _jsx("div", __assign({
+        className: "ncua-dropdown__header"
+      }, {
+        children: _jsx("div", __assign({
+          className: "ncua-dropdown__header-title"
+        }, {
+          children: header.title
+        }))
+      }));
+    }
+    return null;
+  };
+  var renderItem = function (item) {
+    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : ''].filter(Boolean).join(' ');
+    return _jsxs("div", __assign({
+      className: itemClasses
+    }, {
+      children: [_jsx("button", {
+        className: "ncua-dropdown__item-clickable-layer",
+        onClick: function () {
+          return handleClickItem(item);
+        }
+      }), _jsxs("div", __assign({
+        className: "ncua-dropdown__item-content"
+      }, {
+        children: [_jsxs("div", __assign({
+          className: "ncua-dropdown__item-text-group"
+        }, {
+          children: [item.icon && _jsx(Icon, {
+            name: item.icon,
+            className: "ncua-dropdown__item-icon"
+          }), _jsx("span", __assign({
+            className: "ncua-dropdown__item-text"
+          }, {
+            children: item.text
+          }))]
+        })), item.shortcut && _jsx("span", __assign({
+          className: "ncua-dropdown__item-shortcut"
+        }, {
+          children: item.shortcut
+        }))]
+      }))]
+    }), item.id);
+  };
+  var dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
+  return _jsxs("div", __assign({
+    className: dropdownClasses,
+    ref: dropdownRef
+  }, {
+    children: [renderTrigger(), isOpen && _jsxs("div", __assign({
+      className: "ncua-dropdown__menu"
+    }, {
+      children: [renderHeader(), _jsx("div", __assign({
+        className: "ncua-dropdown__menu-items"
+      }, {
+        children: groups.map(function (group, index) {
+          return _jsx("div", __assign({
+            className: "ncua-dropdown__group"
+          }, {
+            children: group.items.map(renderItem)
+          }), index);
+        })
+      }))]
+    }))]
+  }));
+};

package/dist/esm/src/components/dropdown/index.js

@@ -0,0 +1 @@
+export * from './Dropdown';

package/dist/esm/{ui-admin/src → src}/components/index.js

@@ -9,6 +9,5 @@ export * from './radio';
 export * from './select';
 export * from './shared';
 export * from './spinner';
-export * from './svg';
 export * from './toggle';
 export * from './tooltip';

package/dist/types/{ui-admin/index.d.ts → index.d.ts}

@@ -11,7 +11,6 @@ export * from './src/components/shared/hintText';
 export * from './src/components/shared/label';
 export * from './src/components/shared';
 export * from './src/components/spinner';
-export * from './src/components/svg';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';

package/dist/types/src/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,53 @@
+import { IconName } from '@ncds/ui-admin-icon';
+export type AvatarTrigger = {
+    type: 'avatar';
+    avatar: string;
+};
+export type TextTrigger = {
+    type: 'text';
+    title: string;
+};
+export type ButtonTrigger = {
+    type: 'button';
+    text: string;
+};
+export type IconTrigger = {
+    type: 'icon';
+    icon?: IconName;
+};
+export type CustomTrigger = {
+    type: 'custom';
+    children: React.ReactNode;
+};
+export type DropdownItemType = {
+    id: string;
+    text: string;
+    icon?: IconName;
+    shortcut?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    type?: 'default' | 'danger';
+};
+export type DropdownGroup = {
+    items: DropdownItemType[];
+};
+export type AvatarHeader = {
+    type: 'avatar';
+    avatar: string;
+    title: string;
+    subtitle: string;
+};
+export type TextHeader = {
+    type: 'text';
+    title: string;
+};
+export type DropdownHeaderType = AvatarHeader | TextHeader;
+export type DropdownProps = {
+    trigger: AvatarTrigger | TextTrigger | ButtonTrigger | IconTrigger | CustomTrigger;
+    align?: 'left' | 'right';
+    header?: DropdownHeaderType;
+    groups: DropdownGroup[];
+    className?: string;
+};
+export declare const Dropdown: ({ trigger, align, header, groups, className }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/types/src/components/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/{ui-admin/src → src}/components/index.d.ts

@@ -9,7 +9,6 @@ export * from './radio';
 export * from './select';
 export * from './shared';
 export * from './spinner';
-export * from './svg';
 export * from './toggle';
 export * from './tooltip';
 //# sourceMappingURL=index.d.ts.map