@sebgroup/green-react 3.17.0 → 3.19.0

package/src/lib/accordion/accordion-item.js

@@ -0,0 +1,75 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+
+var AccordionItem = function AccordionItem(_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    uuid = _ref.uuid;
+  var labelElementLevel = item.labelElementLevel,
+    label = item.label,
+    subLabel = item.subLabel,
+    content = item.content,
+    customLabel = item.customLabel;
+  var contentRef = useRef(null);
+  var _useState = useState(item.defaultOpen || false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var handleOnClick = function handleOnClick(event) {
+    item.onClick && item.onClick(event);
+    setIsOpen(function (state) {
+      if (!state) {
+        item.onOpen && item.onOpen(event);
+        window.requestAnimationFrame(function () {
+          var _a;
+          (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+          });
+        });
+      } else {
+        item.onClose && item.onClose(event);
+      }
+      return !state;
+    });
+  };
+  return jsxs("div", {
+    children: [jsx("div", {
+      role: "heading",
+      "aria-level": labelElementLevel,
+      children: jsxs("button", {
+        id: "accordion-item-button-".concat(index, "-").concat(uuid),
+        "aria-expanded": isOpen,
+        "aria-controls": "accordion-item-region-".concat(index, "-").concat(uuid),
+        onClick: function onClick(event) {
+          handleOnClick(event);
+        },
+        children: [customLabel ? customLabel : jsx("span", {
+          children: label
+        }), subLabel && jsx("span", {
+          children: subLabel
+        }), jsx("svg", {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: jsx("path", {
+            d: "M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z",
+            fill: "#333333"
+          })
+        })]
+      })
+    }), jsx("div", {
+      role: "region",
+      id: "accordion-item-region-".concat(index, "-").concat(uuid),
+      "aria-labelledby": "accordion-item-button-".concat(index, "-").concat(uuid),
+      hidden: !isOpen,
+      children: jsx("div", {
+        ref: contentRef,
+        children: content
+      })
+    })]
+  });
+};
+
+export { AccordionItem as default };

package/src/lib/accordion/accordion.js

@@ -0,0 +1,25 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import AccordionItem from './accordion-item.js';
+import { randomId } from '@sebgroup/extract';
+
+var Accordion = function Accordion(_ref) {
+  var items = _ref.items;
+  var _React$useState = React.useState(randomId()),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    uuid = _React$useState2[0];
+    _React$useState2[1];
+  return jsx("div", {
+    className: "accordion",
+    children: items && items.map(function (item, index) {
+      return jsx(AccordionItem, {
+        item: item,
+        index: index,
+        uuid: uuid
+      }, "accordion-".concat(uuid, "-").concat(index));
+    })
+  });
+};
+
+export { Accordion, Accordion as default };

package/src/lib/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './accordion';
+export * from './accordion-item';

package/src/lib/accordion/index.js

@@ -0,0 +1,6 @@
+export { Accordion } from './accordion.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../../../_rollupPluginBabelHelpers.js';
+import './accordion-item.js';
+import '@sebgroup/extract';

package/src/lib/alert-ribbon/alert-ribbon.js

@@ -0,0 +1,98 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
+import '../../../_tslib.js';
+import '@sebgroup/extract';
+import { Check } from '../icons/check.js';
+import { SquareExclamation } from '../icons/square-exclamation.js';
+import { SquareInfo } from '../icons/square-info.js';
+
+function AlertRibbon(_ref) {
+  var type = _ref.type,
+    header = _ref.header,
+    footer = _ref.footer,
+    children = _ref.children,
+    closeText = _ref.closeText,
+    _ref$isCloseable = _ref.isCloseable,
+    isCloseable = _ref$isCloseable === void 0 ? true : _ref$isCloseable,
+    onClose = _ref.onClose,
+    role = _ref.role,
+    ariaLive = _ref['aria-live'],
+    closeAriaLabel = _ref.closeAriaLabel;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    closeButton = _useState2[0],
+    setCloseButton = _useState2[1];
+  useEffect(function () {
+    if (!isCloseable) {
+      setCloseButton(null);
+    } else {
+      if (closeText) setCloseButton(jsxs("button", {
+        className: "close",
+        children: [jsx("span", {
+          className: "sr-only",
+          children: closeText
+        }), jsx("i", {})]
+      }));else setCloseButton(jsxs("button", {
+        className: "close",
+        children: [jsx("span", {
+          className: "sr-only",
+          children: "Close"
+        }), jsx("i", {})]
+      }));
+    }
+  }, [isCloseable, closeText]);
+  var renderIcon = function renderIcon() {
+    switch (type) {
+      case 'danger':
+      case 'warning':
+        return jsx(SquareExclamation, {
+          "aria-hidden": true
+        });
+      case 'success':
+        return jsx(Check, {
+          "aria-hidden": true
+        });
+      default:
+        return jsx(SquareInfo, {
+          "aria-hidden": true
+        });
+    }
+  };
+  var renderHeader = function renderHeader() {
+    if (!header) {
+      return null;
+    }
+    return /*#__PURE__*/React.isValidElement(header) ? header : jsx("span", {
+      className: "header",
+      children: header
+    });
+  };
+  return jsxs("div", {
+    className: "alert-ribbon ".concat(type),
+    role: role,
+    "aria-live": ariaLive,
+    children: [jsx("i", {
+      "aria-hidden": "true",
+      children: renderIcon()
+    }), jsxs("div", {
+      className: "alert-ribbon__content",
+      children: [renderHeader(), jsx("p", {
+        children: children
+      })]
+    }), closeButton && jsx("button", {
+      className: "close",
+      type: "button",
+      "aria-label": closeAriaLabel !== null && closeAriaLabel !== void 0 ? closeAriaLabel : 'Close alert',
+      onClick: function onClick(event) {
+        onClose && onClose(event);
+      },
+      children: jsx("i", {})
+    }), footer && jsxs("div", {
+      className: "alert-ribbon__footer",
+      children: [" ", footer, " "]
+    })]
+  });
+}
+
+export { AlertRibbon, AlertRibbon as default };

package/src/lib/alert-ribbon/index.d.ts

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

package/src/lib/alert-ribbon/index.js

@@ -0,0 +1,9 @@
+export { AlertRibbon } from './alert-ribbon.js';
+import '../../../_rollupPluginBabelHelpers.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../../../_tslib.js';
+import '@sebgroup/extract';
+import '../icons/check.js';
+import '../icons/square-exclamation.js';
+import '../icons/square-info.js';

package/src/lib/badge/badge.js

@@ -0,0 +1,60 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+/**
+ * Renders a badge component.
+ *
+ * @param {React.ReactNode} props.children - The content of the badge.
+ * @param {string} props.badgeType - The type of the badge.
+ * @param {boolean} props.isCloseable - Indicates if the badge is closeable.
+ * @param {string} props.closeText - The text for the close button.
+ * @param {string} props.customColor - The custom color for the badge.
+ * @param {string} props.customBackgroundColor - The custom background color for the badge.
+ * @returns {React.ReactNode} The rendered badge component.
+ */
+function Badge(_a) {
+  var children = _a.children,
+    badgeType = _a.badgeType,
+    isCloseable = _a.isCloseable,
+    closeText = _a.closeText,
+    customColor = _a.customColor,
+    customBackgroundColor = _a.customBackgroundColor,
+    props = __rest(_a, ["children", "badgeType", "isCloseable", "closeText", "customColor", "customBackgroundColor"]);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isClosed = _React$useState2[0],
+    setIsClosed = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    type = _React$useState4[0],
+    setType = _React$useState4[1];
+  React.useEffect(function () {
+    if (badgeType) {
+      setType(badgeType);
+    }
+    if (!!customColor || !!customBackgroundColor) {
+      setType('');
+    }
+  }, [badgeType, customColor, customBackgroundColor]);
+  return !isClosed ? jsxs("span", Object.assign({}, props, {
+    className: "badge ".concat(type),
+    style: {
+      color: customColor,
+      backgroundColor: customBackgroundColor
+    },
+    children: [jsx("strong", {
+      children: children
+    }), isCloseable && jsxs("button", {
+      type: "button",
+      className: "close",
+      onClick: function onClick() {
+        return setIsClosed(true);
+      },
+      children: [closeText, jsx("i", {})]
+    })]
+  })) : null;
+}
+
+export { Badge, Badge as default };

package/src/lib/badge/index.d.ts

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

package/src/lib/badge/index.js

@@ -0,0 +1,5 @@
+export { Badge } from './badge.js';
+import '../../../_rollupPluginBabelHelpers.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';

package/src/lib/breadcrumb/breadcrumb.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import classNames from 'classnames';
+
+var Breadcrumb = function Breadcrumb(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return jsx("ul", {
+    className: classNames('breadcrumb', className),
+    children: React.Children.map(children, function (Child, childIndex) {
+      return jsxs(React.Fragment, {
+        children: [Child, childIndex !== React.Children.count(children) - 1 && jsx(BreadcrumbItem, {
+          className: "icon",
+          children: jsx("svg", {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: jsx("path", {
+              d: "M9.22817 5.19072L8.60942 5.80947C8.46255 5.95635 8.46255 6.19385 8.60942 6.34072L14.2563 12.0001L8.60942 17.6595C8.46255 17.8063 8.46255 18.0438 8.60942 18.1907L9.22817 18.8095C9.37505 18.9563 9.61255 18.9563 9.75942 18.8095L16.3032 12.2657C16.45 12.1188 16.45 11.8813 16.3032 11.7345L9.75942 5.19072C9.61255 5.04385 9.37505 5.04385 9.22817 5.19072Z",
+              fill: "#333333"
+            })
+          })
+        })]
+      }, childIndex);
+    })
+  });
+};
+var BreadcrumbItem = function BreadcrumbItem(props) {
+  return jsx("li", Object.assign({}, props));
+};
+
+export { Breadcrumb, BreadcrumbItem };

package/src/lib/breadcrumb/index.d.ts

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

package/src/lib/breadcrumb/index.js

@@ -0,0 +1,4 @@
+export { Breadcrumb, BreadcrumbItem } from './breadcrumb.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';

package/src/lib/card/card.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Card(_ref) {
+  var children = _ref.children,
+    header = _ref.header,
+    footer = _ref.footer;
+  return jsxs("section", {
+    className: "card",
+    children: [header && jsx("header", {
+      children: header
+    }), children, footer && jsx("footer", {
+      children: footer
+    })]
+  });
+}
+
+export { Card, Card as default };

package/src/lib/card/index.d.ts

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

package/src/lib/card/index.js

@@ -0,0 +1,2 @@
+export { Card } from './card.js';
+import 'react/jsx-runtime';

package/src/lib/context-menu/context-menu.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { GdsContextMenu, GdsMenuItem, GdsMenuHeading } from '@sebgroup/green-core/components/context-menu/index.js';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
+
+registerTransitionalStyles();
+var ContextMenu = createComponent({
+  tagName: getScopedTagName('gds-context-menu'),
+  elementClass: GdsContextMenu,
+  events: {
+    onMenuItemClick: 'gds-menu-item-click',
+    onUiStateChange: 'gds-ui-state'
+  },
+  react: React
+});
+var MenuItem = createComponent({
+  tagName: getScopedTagName('gds-menu-item'),
+  elementClass: GdsMenuItem,
+  events: {
+    onMenuItemClick: 'gds-menu-item-click'
+  },
+  react: React
+});
+var CoreMenuHeading = createComponent({
+  tagName: getScopedTagName('gds-menu-heading'),
+  elementClass: GdsMenuHeading,
+  react: React
+});
+
+export { ContextMenu, CoreMenuHeading, MenuItem };

package/src/lib/context-menu/index.d.ts

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

package/src/lib/context-menu/index.js

@@ -0,0 +1,6 @@
+export { ContextMenu, CoreMenuHeading, MenuItem } from './context-menu.js';
+import 'react';
+import '@lit/react';
+import '@sebgroup/green-core/components/context-menu/index.js';
+import '@sebgroup/green-core/scoping';
+import '@sebgroup/green-core/transitional-styles';

package/src/lib/datepicker/datepicker.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/index.js';
 import { GdsValidator } from '@sebgroup/green-core/components/form/form-control';
 export declare const CoreDatepicker: import("@lit/react").ReactWebComponent<GdsDatepicker, {
@@ -11,35 +12,35 @@ export type DatepickerOptions = {
     /**
      * Whether to disable weekends in the calendar.
      */
-    disabledWeekends: boolean;
+    disabledWeekends?: boolean;
     /**
      * Whether to hide the label above the input field.
      */
-    hideLabel: boolean;
+    hideLabel?: boolean;
     /**
      * Validation state of the form control. Setting this to true triggers the invalid state of the control.
      */
-    invalid: boolean;
+    invalid?: boolean;
     /**
      * Validate the form control element. Should return the validity state and an optional validation message.
      */
-    validator: GdsValidator;
+    validator?: GdsValidator;
     /**
      * The label text displayed above the datepicker. This should always be set to a descriptive label.
      */
-    label: string;
+    label?: string;
     /**
      * The maximum date that can be selected.
      */
-    maxDate: Date;
+    maxDate?: Date;
     /**
      * The minimum date that can be selected.
      */
-    minDate: Date;
+    minDate?: Date;
     /**
      * Controls whether the datepicker popover is open.
      */
-    open: boolean;
+    open?: boolean;
     /**
      * Callback function that is called when the value of the Datepicker changes.
      */
@@ -47,15 +48,15 @@ export type DatepickerOptions = {
     /**
      * Sets the datepicker as a required field for forms.
      */
-    required: boolean;
+    required?: boolean;
     /**
      * Whether to show a column of week numbers in the calendar.
      */
-    showWeeks: boolean;
+    showWeeks?: boolean;
     /**
      * Whether to use the small variant of the datepicker field.
      */
-    size: 'small' | 'medium';
+    size?: 'small' | 'medium';
     /**
      * The test ID used for testing.
      */
@@ -65,6 +66,14 @@ export type DatepickerOptions = {
      * This can be a string if set via the value attribute in markup, or via the setAttribute DOM API.
      */
     value?: Date;
+    /**
+     * The ref to the datepicker element.
+     */
+    ref?: React.Ref<GdsDatepicker>;
+    /**
+     * The children of the datepicker.
+     */
+    children?: React.ReactNode;
     /**
      * @deprecated Use `value` instead.
      */
@@ -74,5 +83,5 @@ export type DatepickerOptions = {
      */
     currentDate?: Date;
 };
-export declare const Datepicker: ({ label, onChange, minDate, maxDate, value, showWeeks, testId, validator, selectedDate, currentDate, ...props }: DatepickerOptions) => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: React.ForwardRefExoticComponent<Omit<DatepickerOptions, "ref"> & React.RefAttributes<unknown>>;
 export default Datepicker;

package/src/lib/datepicker/datepicker.js

@@ -0,0 +1,64 @@
+import { _ as __rest } from '../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import { createComponent } from '@lit/react';
+import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/index.js';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
+
+registerTransitionalStyles();
+var CoreDatepicker = createComponent({
+  tagName: getScopedTagName('gds-datepicker'),
+  elementClass: GdsDatepicker,
+  events: {
+    onchange: 'change'
+  },
+  react: React
+});
+var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$label = _a.label,
+    label = _a$label === void 0 ? 'Date' : _a$label,
+    onChange = _a.onChange,
+    minDate = _a.minDate,
+    maxDate = _a.maxDate,
+    value = _a.value,
+    showWeeks = _a.showWeeks,
+    testId = _a.testId,
+    validator = _a.validator,
+    selectedDate = _a.selectedDate,
+    currentDate = _a.currentDate,
+    props = __rest(_a, ["label", "onChange", "minDate", "maxDate", "value", "showWeeks", "testId", "validator", "selectedDate", "currentDate"]);
+  if (currentDate && !value) value = currentDate;
+  if (selectedDate && !value) value = selectedDate;
+  var min = minDate ? minDate : new Date(new Date().getFullYear() - 10, 0, 1);
+  var max = maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1);
+  var onChangeHandler = function onChangeHandler(e) {
+    if (onChange) {
+      onChange(e.detail.value);
+    }
+  };
+  var _ref = useRef(null);
+  useImperativeHandle(ref, function () {
+    return _ref.current;
+  }, [_ref]);
+  useEffect(function () {
+    if (_ref === null || _ref === void 0 ? void 0 : _ref.current) {
+      _ref.current.validator = validator;
+    }
+  }, [validator]);
+  return jsx("div", {
+    className: "form-group",
+    children: jsx(CoreDatepicker, Object.assign({
+      "data-testid": testId,
+      label: label,
+      min: min,
+      max: max,
+      showWeekNumbers: showWeeks,
+      onchange: onChangeHandler,
+      value: value,
+      ref: _ref
+    }, props))
+  });
+});
+
+export { CoreDatepicker, Datepicker, Datepicker as default };

package/src/lib/datepicker/index.d.ts

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

package/src/lib/datepicker/index.js

@@ -0,0 +1,8 @@
+export { CoreDatepicker, Datepicker } from './datepicker.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@lit/react';
+import '@sebgroup/green-core/components/datepicker/index.js';
+import '@sebgroup/green-core/scoping';
+import '@sebgroup/green-core/transitional-styles';