@emporix/component-library 2.6.0 → 2.8.0

package/README.md

@@ -349,6 +349,62 @@ const [received, setReceived] = useState(false)
 | className   | string                              | -       | Additional CSS class for the root               |
 | data-testid | string                              | -       | Test ID for root and input (suffix `-input`)    |
 
+### Calendar
+
+Date (and optional time) picker wrapping [PrimeReact Calendar](https://primereact.org/calendar/). Input and overlay styles are scoped with CSS Modules (including `panelClassName` on the popup) so host-app `.p-*` rules cannot restyle CL Calendar — including when PrimeReact appends the overlay to `document.body` for table column filters. Pass already-translated `dateFormat` / `placeholder` / `label` — the component does no i18n itself. The change event matches PrimeReact (`{ value, originalEvent, target }`).
+
+```tsx
+import { useState } from 'react'
+import { Calendar } from '@emporix/component-library'
+
+const [createdAt, setCreatedAt] = useState<Date | null>(null)
+
+<Calendar
+  label="Created date"
+  value={createdAt}
+  dateFormat="mm/dd/yy"
+  showButtonBar
+  onChange={e => setCreatedAt(e.value instanceof Date ? e.value : null)}
+/>
+
+// Table column filter — range selection, same overlay
+<Calendar
+  selectionMode="range"
+  value={range}
+  showButtonBar
+  style={{ minWidth: '180px' }}
+  onChange={e => setRange(Array.isArray(e.value) ? e.value : undefined)}
+/>
+```
+
+#### Props
+
+| Prop           | Type                                    | Default    | Description                                              |
+| -------------- | --------------------------------------- | ---------- | -------------------------------------------------------- |
+| value          | Date \| Date[] \| string \| null        | -          | Selected date, range, or list (controlled)               |
+| onChange       | (e: CalendarChangeEvent) => void        | -          | Fired when the selection changes                         |
+| selectionMode  | `'single'` \| `'range'` \| `'multiple'` | `'single'` | One date, from/to pair, or a list of dates               |
+| dateFormat     | string                                  | -          | PrimeReact date format tokens (pass a translated string) |
+| showTime       | boolean                                 | false      | Include a time picker in the overlay                     |
+| hourFormat     | `'12'` \| `'24'`                        | -          | Clock used when `showTime` is set                        |
+| showButtonBar  | boolean                                 | false      | Today / Clear buttons in the overlay footer              |
+| showIcon       | boolean                                 | false      | Calendar icon beside the input                           |
+| inline         | boolean                                 | false      | Render the datepicker inline instead of as a popup       |
+| label          | ReactNode                               | -          | Label rendered above the input                           |
+| tooltip        | string                                  | -          | Info icon tooltip next to the label                      |
+| required       | boolean                                 | false      | Shows an asterisk on the label                           |
+| error          | ReactNode                               | -          | Error text below the input                               |
+| placeholder    | string                                  | -          | Shown while no date is selected                          |
+| inputId        | string                                  | -          | id for the inner text input                              |
+| disabled       | boolean                                 | false      | Disables the input and overlay                           |
+| readOnly       | boolean                                 | false      | Blocks typing; the overlay still opens                   |
+| minDate        | Date                                    | -          | Earliest selectable date                                 |
+| maxDate        | Date                                    | -          | Latest selectable date                                   |
+| style          | CSSProperties                           | -          | Inline styles on the `.p-calendar` root (e.g. minWidth)  |
+| className      | string                                  | -          | Additional CSS class on the field wrapper                |
+| panelClassName | string                                  | -          | Additional CSS class on the overlay panel                |
+| data-testid    | string                                  | -          | Test ID for the field wrapper                            |
+
 ### Dialog
 
 A modal dialog built on [PrimeReact Dialog](https://primereact.org/dialog/). Use for focused tasks that need a decision or confirmation. Wraps PrimeReact internally with scoped Emporix styles.
@@ -896,6 +952,7 @@ const tabs: TabItem[] = [
 | onTabChange | (tabId: string) => void | -       | Callback when tab is changed. Not fired for disabled tabs                                                                     |
 | keepMounted | boolean                 | false   | Keep all panels mounted and hide inactive ones, so panel state survives switches (like PrimeReact `renderActiveOnly={false}`) |
 | fullWidth   | boolean                 | false   | Stretch tabs to evenly fill the available width                                                                               |
+| scrollable  | boolean                 | true    | Show prev/next scroll buttons when headers overflow (ignored when `fullWidth` is true)                                        |
 | className   | string                  | -       | Additional CSS class                                                                                                          |
 | data-testid | string                  | -       | Test ID for testing                                                                                                           |
 

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,137 @@
+import { CSSProperties, ReactNode, SyntheticEvent } from 'react';
+export type CalendarSelectionMode = 'single' | 'range' | 'multiple';
+export type CalendarHourFormat = '12' | '24';
+export type CalendarValue = Date | Date[] | string | null | undefined;
+export interface CalendarChangeEvent {
+    originalEvent: SyntheticEvent;
+    value: CalendarValue;
+    stopPropagation(): void;
+    preventDefault(): void;
+    target: {
+        name: string;
+        id: string;
+        value: CalendarValue;
+    };
+}
+export interface CalendarProps {
+    /**
+     * Selected date, date range, or multiple dates (controlled).
+     */
+    value?: CalendarValue;
+    /**
+     * Fired when the selection changes. `value` is a `Date`, `Date[]`, or `null`.
+     */
+    onChange?: (event: CalendarChangeEvent) => void;
+    /**
+     * `single` for one date, `range` for a from/to pair, `multiple` for a list.
+     * @default 'single'
+     */
+    selectionMode?: CalendarSelectionMode;
+    /**
+     * PrimeReact date format tokens, e.g. `mm/dd/yy`. Pass already-localized
+     * strings — the component does no i18n itself.
+     */
+    dateFormat?: string;
+    /**
+     * When true, the overlay includes a time picker.
+     * @default false
+     */
+    showTime?: boolean;
+    /**
+     * 12- or 24-hour clock when `showTime` is set.
+     */
+    hourFormat?: CalendarHourFormat;
+    /**
+     * Shows Today / Clear buttons in the overlay footer.
+     * @default false
+     */
+    showButtonBar?: boolean;
+    /**
+     * Shows a calendar icon beside the input.
+     * @default false
+     */
+    showIcon?: boolean;
+    /**
+     * Render the datepicker inline instead of as a popup overlay.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Label rendered above the input.
+     */
+    label?: ReactNode;
+    /**
+     * When set, an info icon with this tooltip is shown next to the label.
+     */
+    tooltip?: string;
+    /**
+     * Whether the field is required (shows an asterisk on the label).
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Error text rendered below the input.
+     */
+    error?: ReactNode;
+    /**
+     * Placeholder shown while no date is selected.
+     */
+    placeholder?: string;
+    /**
+     * Id for the inner text input (for label association via htmlFor).
+     */
+    inputId?: string;
+    /**
+     * Name attribute forwarded to the inner input.
+     */
+    name?: string;
+    /**
+     * Earliest selectable date.
+     */
+    minDate?: Date;
+    /**
+     * Latest selectable date.
+     */
+    maxDate?: Date;
+    /**
+     * When true, the input cannot be edited and the overlay does not open.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When true, typing in the input is blocked; the overlay still opens.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Inline styles on the PrimeReact `.p-calendar` root (e.g. `minWidth`).
+     */
+    style?: CSSProperties;
+    /**
+     * Additional CSS class name on the field wrapper.
+     */
+    className?: string;
+    /**
+     * Additional CSS class name on the overlay panel (appended to document.body).
+     */
+    panelClassName?: string;
+    /**
+     * Test ID for the field wrapper.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Date (and optional time) picker built on
+ * [PrimeReact Calendar](https://primereact.org/calendar/).
+ *
+ * Overlay styles are scoped via a CSS-module `panelClassName` so host
+ * `.p-*` rules cannot restyle this instance, even when PrimeReact appends
+ * the popup to `document.body` (required for table column filters, which
+ * clip overflow). Pass already-translated `label` / `placeholder` /
+ * `dateFormat` — the component is context-free.
+ */
+export declare const Calendar: {
+    ({ value, onChange, selectionMode, dateFormat, showTime, hourFormat, showButtonBar, showIcon, inline, label, tooltip, required, error, placeholder, inputId: inputIdProp, name, minDate, maxDate, disabled, readOnly, style, className, panelClassName, "data-testid": testId, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/components/calendar/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/Calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAOrE,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAA;AAEnE,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;AAErE,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,cAAc,CAAA;IAC7B,KAAK,EAAE,aAAa,CAAA;IACpB,eAAe,IAAI,IAAI,CAAA;IACvB,cAAc,IAAI,IAAI,CAAA;IACtB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAA;QACZ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,aAAa,CAAA;KACrB,CAAA;CACF;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC/C;;;OAGG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACrC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAA;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAA;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ;sRAyBlB,aAAa;;CAkDf,CAAA"}

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,3 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps, CalendarChangeEvent, CalendarSelectionMode, CalendarHourFormat, CalendarValue, } from './Calendar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,GACd,MAAM,YAAY,CAAA"}

package/dist/components/tabs/Tabs.d.ts

@@ -46,10 +46,16 @@ export interface TabsProps {
      * Stretch tabs to evenly fill the available width
      */
     fullWidth?: boolean;
+    /**
+     * When true and not `fullWidth`, show prev/next scroll buttons when tab
+     * headers overflow the container (management-dashboard / PrimeReact TabView).
+     * @default true
+     */
+    scrollable?: boolean;
     /**
      * Test ID for testing
      */
     'data-testid'?: string;
 }
-export declare const Tabs: ({ tabs, activeTabId, onTabChange, keepMounted, className, fullWidth, "data-testid": testId, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ tabs, activeTabId, onTabChange, keepMounted, className, fullWidth, scrollable, "data-testid": testId, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAA;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,IAAI,GAAI,wGASlB,SAAS,4CAiEX,CAAA"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAI3E,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAA;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAKD,eAAO,MAAM,IAAI,GAAI,oHAUlB,SAAS,4CAsLX,CAAA"}