@synerise/ds-tray 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2025-09-05)
+
+
+### Features
+
+* **tray:** new component ([4f747b8](https://github.com/Synerise/synerise-design/commit/4f747b8ed29591ec8358d8b7c54d2d7d40374524))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,93 @@
+---
+id: tray
+title: Tray
+---
+
+Tray UI Component
+
+A slide-over panel (tray) rendered from the edge of the screen. Content and visibility are provided via the Tray context — the component itself only mounts/render when its id is opened by the provider.
+
+## Installation
+
+```bash
+npm i @synerise/ds-tray
+# or
+yarn add @synerise/ds-tray
+```
+
+## Quick overview
+
+- Mount a single `Tray` (or more) inside a `TrayProvider`.
+- Open/close trays via the `useTray` hook which calls `openTray(id, TrayData)` / `closeTray(id)`.
+
+Key source files:
+- Component: [`Tray`](packages/components/tray/src/Tray.tsx)
+- Props type: [`TrayProps`](packages/components/tray/src/Tray.types.ts)
+- Provider & data shape: [`TrayProvider` / `TrayData`](packages/components/tray/src/components/TrayProvider.tsx)
+- Hooks: [`useTray`](packages/components/tray/src/hooks/useTray.ts), [`useTrayContext`](packages/components/tray/src/hooks/useTrayContext.ts)
+- Context: [`TrayContext`](packages/components/tray/src/contexts/TrayContext.ts)
+
+## Basic usage
+
+1) Wrap your app with the provider and mount a `Tray` with a stable id:
+
+```tsx
+import React from 'react';
+import { TrayProvider } from '@synerise/ds-tray';
+import Tray from '@synerise/ds-tray';
+
+const App = () => (
+  <TrayProvider>
+    {/* mount tray(s) that will be controlled via context */}
+    <Tray id="my-tray" />
+    {/* other app UI */}
+  </TrayProvider>
+);
+```
+
+2) Open the tray from anywhere inside the provider using the hook:
+
+```tsx
+import React from 'react';
+import { useTray } from '@synerise/ds-tray';
+
+const Demo = () => {
+  const { open, close } = useTray();
+
+  const openTray = () => {
+    open('my-tray', {
+      title: 'Details',
+      content: <div>Tray content</div>,
+      headerRightSide: <span>Extra</span>,
+      footer: <div><button onClick={() => close('my-tray')}>Close</button></div>,
+      onClose: (id) => console.log('closed', id),
+    });
+  };
+
+  return <button onClick={openTray}>Open tray</button>;
+};
+```
+
+## API
+
+Tray component props
+| Property                      | Description                                        | Type                        | Required |     |
+|-------------------------------|----------------------------------------------------|-----------------------------|----------|-----|
+| `id`                          | Identifier used to bind the tray to provider state | `string                     | number`  | yes |
+| any other HTML div attributes | `className`, `style`, `data-*`, etc.               | `HTMLDivElement` attributes | no       |     |
+
+
+Tray data (passed to `open(id, data)`) — [`TrayData`](packages/components/tray/src/components/TrayProvider.tsx)
+| Property          | Description                                    | Type         |                  |
+|-------------------|------------------------------------------------|--------------|------------------|
+| `content`         | Main content to render inside the tray         | `ReactNode`  |                  |
+| `title`           | Header title (node)                            | `ReactNode`  |                  |
+| `headerRightSide` | Node rendered in header to the right of title  | `ReactNode`  |                  |
+| `footer`          | Footer node rendered at bottom of tray         | `ReactNode`  |                  |
+| `onClose`         | Callback invoked when tray close action occurs | `(id: string | number) => void` |
+
+Notes
+- The `Tray` component reads its state from context (`getTrayState(id)`) and returns `null` if not open. See [`Tray.tsx`](packages/components/tray/src/Tray.tsx).
+- The provider stores tray entries keyed by id; you can open different trays by using different ids.
+- The close button in the header calls `closeTray(id)` and triggers `TrayData.onClose` if provided.
+- `Tray` accepts normal div props because `TrayProps` extends HTML div attributes. See [`Tray.types.ts`](packages/components/tray/src/Tray.types.ts).

package/dist/Tray.const.d.ts

@@ -0,0 +1,3 @@
+export declare const WRAPPER_HEIGHT = 562;
+export declare const FOOTER_HEIGHT = 48;
+export declare const HEADER_HEIGHT = 56;

package/dist/Tray.const.js

@@ -0,0 +1,3 @@
+export var WRAPPER_HEIGHT = 562;
+export var FOOTER_HEIGHT = 48;
+export var HEADER_HEIGHT = 56;

package/dist/Tray.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TrayProps } from './Tray.types';
+declare const Tray: ({ id, ...htmlAttributes }: TrayProps) => React.JSX.Element | null;
+export default Tray;

package/dist/Tray.js

@@ -0,0 +1,40 @@
+var _excluded = ["id"];
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import Button from '@synerise/ds-button';
+import Icon, { CloseM } from '@synerise/ds-icon';
+import * as S from './Tray.styles';
+import { useTrayContext } from './hooks/useTrayContext';
+var Tray = function Tray(_ref) {
+  var id = _ref.id,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useTrayContext = useTrayContext(),
+    getTrayState = _useTrayContext.getTrayState,
+    closeTray = _useTrayContext.closeTray;
+  var _getTrayState = getTrayState(id),
+    isOpen = _getTrayState.isOpen,
+    data = _getTrayState.data;
+  if (!isOpen) {
+    return null;
+  }
+  var content = data.content,
+    title = data.title,
+    footer = data.footer,
+    headerRightSide = data.headerRightSide,
+    onClose = data.onClose;
+  return /*#__PURE__*/React.createElement(S.TrayWrapper, htmlAttributes, /*#__PURE__*/React.createElement(S.TrayHeader, null, /*#__PURE__*/React.createElement(S.TrayHeaderLeft, null, /*#__PURE__*/React.createElement(S.TrayTitle, {
+    level: 4
+  }, title)), /*#__PURE__*/React.createElement(S.TrayHeaderRight, null, headerRightSide, /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    mode: "single-icon",
+    onClick: function onClick() {
+      closeTray(id);
+      onClose == null || onClose(id);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
+  })))), /*#__PURE__*/React.createElement(S.TrayContent, null, /*#__PURE__*/React.createElement(S.TrayScrollbar, {
+    absolute: true
+  }, content)), footer && /*#__PURE__*/React.createElement(S.TrayFooter, null, footer));
+};
+export default Tray;

package/dist/Tray.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const TrayContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrayScrollbar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(import("@synerise/ds-scrollbar").ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const TrayWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrayHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrayHeaderLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrayHeaderRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrayFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrayTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {}, never>;

package/dist/Tray.styles.js

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import Scrollbar from '@synerise/ds-scrollbar';
+import { Title } from '@synerise/ds-typography';
+import { FOOTER_HEIGHT, HEADER_HEIGHT, WRAPPER_HEIGHT } from './Tray.const';
+export var TrayContent = styled.div.withConfig({
+  displayName: "Traystyles__TrayContent",
+  componentId: "sc-1v5sbw5-0"
+})(["flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column;"]);
+export var TrayScrollbar = styled(Scrollbar).withConfig({
+  displayName: "Traystyles__TrayScrollbar",
+  componentId: "sc-1v5sbw5-1"
+})(["min-height:0;display:flex;flex-direction:column;.scrollbar-container{min-height:0;}"]);
+export var TrayWrapper = styled.div.withConfig({
+  displayName: "Traystyles__TrayWrapper",
+  componentId: "sc-1v5sbw5-2"
+})(["position:fixed;top:0;right:0;z-index:", ";box-shadow:", ";width:400px;border-radius:3px;max-height:", "px;display:flex;flex-direction:column;background:", ";"], function (props) {
+  return props.theme.variables['zindex-tooltip'];
+}, function (props) {
+  return props.theme.variables['box-shadow-2'];
+}, WRAPPER_HEIGHT, function (props) {
+  return props.theme.palette.white;
+});
+export var TrayHeader = styled.div.withConfig({
+  displayName: "Traystyles__TrayHeader",
+  componentId: "sc-1v5sbw5-3"
+})(["height:", "px;flex:0 0 ", "px;padding-left:18px;padding-right:12px;border-bottom:solid 1px ", ";display:flex;align-items:center;justify-content:space-between;"], HEADER_HEIGHT, HEADER_HEIGHT, function (props) {
+  return props.theme.palette['grey-200'];
+});
+export var TrayHeaderLeft = styled.div.withConfig({
+  displayName: "Traystyles__TrayHeaderLeft",
+  componentId: "sc-1v5sbw5-4"
+})([""]);
+export var TrayHeaderRight = styled.div.withConfig({
+  displayName: "Traystyles__TrayHeaderRight",
+  componentId: "sc-1v5sbw5-5"
+})(["display:flex;gap:8px;align-items:center;"]);
+export var TrayFooter = styled.div.withConfig({
+  displayName: "Traystyles__TrayFooter",
+  componentId: "sc-1v5sbw5-6"
+})(["border-top:solid 1px ", ";background:", ";height:", "px;display:flex;align-items:center;padding:0 8px;flex:0 0 ", "px;"], function (props) {
+  return props.theme.palette['grey-100'];
+}, function (props) {
+  return props.theme.palette['grey-050'];
+}, FOOTER_HEIGHT, FOOTER_HEIGHT);
+export var TrayTitle = styled(Title).withConfig({
+  displayName: "Traystyles__TrayTitle",
+  componentId: "sc-1v5sbw5-7"
+})(["margin:0;"]);

package/dist/Tray.types.d.ts

@@ -0,0 +1,4 @@
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
+export type TrayProps = WithHTMLAttributes<HTMLDivElement, {
+    id: string;
+}>;

package/dist/Tray.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/TrayProvider.d.ts

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from 'react';
+export type TrayData = {
+    content: ReactNode;
+    title: ReactNode;
+    headerRightSide?: ReactNode;
+    onClose?: (id: string) => void;
+    footer?: ReactNode;
+};
+export type TrayProviderProps = {
+    children: ReactNode;
+};
+export declare const TrayProvider: ({ children }: TrayProviderProps) => React.JSX.Element;

package/dist/components/TrayProvider.js

@@ -0,0 +1,39 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { TrayContext } from '../contexts/TrayContext';
+export var TrayProvider = function TrayProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState({}),
+    trayState = _useState[0],
+    setTrayState = _useState[1];
+  var openTray = function openTray(id, data) {
+    setTrayState(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[id] = {
+        isOpen: true,
+        data: data
+      }, _extends2));
+    });
+  };
+  var closeTray = function closeTray(id) {
+    setTrayState(function (prev) {
+      var _extends3;
+      return _extends({}, prev, (_extends3 = {}, _extends3[id] = _extends({}, prev[id], {
+        isOpen: false
+      }), _extends3));
+    });
+  };
+  var getTrayState = function getTrayState(id) {
+    return trayState[id] || {
+      isOpen: false,
+      data: null
+    };
+  };
+  return /*#__PURE__*/React.createElement(TrayContext.Provider, {
+    value: {
+      openTray: openTray,
+      closeTray: closeTray,
+      getTrayState: getTrayState
+    }
+  }, children);
+};

package/dist/contexts/TrayContext.d.ts

@@ -0,0 +1,10 @@
+import { type TrayData } from '../components/TrayProvider';
+export type TrayContextType = {
+    openTray: (id: string, data: TrayData) => void;
+    closeTray: (id: string) => void;
+    getTrayState: (id: string) => {
+        isOpen: boolean;
+        data: TrayData;
+    };
+};
+export declare const TrayContext: import("react").Context<TrayContextType | undefined>;

package/dist/contexts/TrayContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var TrayContext = /*#__PURE__*/createContext(undefined);

package/dist/hooks/useTray.d.ts

@@ -0,0 +1,4 @@
+export declare const useTray: () => {
+    open: (id: string, data: import("../components/TrayProvider").TrayData) => void;
+    close: (id: string) => void;
+};

package/dist/hooks/useTray.js

@@ -0,0 +1,10 @@
+import { useTrayContext } from './useTrayContext';
+export var useTray = function useTray() {
+  var _useTrayContext = useTrayContext(),
+    openTray = _useTrayContext.openTray,
+    closeTray = _useTrayContext.closeTray;
+  return {
+    open: openTray,
+    close: closeTray
+  };
+};

package/dist/hooks/useTrayContext.d.ts

@@ -0,0 +1,2 @@
+import { type TrayContextType } from '../contexts/TrayContext';
+export declare const useTrayContext: () => TrayContextType;

package/dist/hooks/useTrayContext.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { TrayContext } from '../contexts/TrayContext';
+export var useTrayContext = function useTrayContext() {
+  var context = useContext(TrayContext);
+  if (!context) {
+    throw new Error('useTrayContext must be used within a TrayProvider');
+  }
+  return context;
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Tray';
+export type { TrayProps } from './Tray.types';
+export { TrayProvider } from './components/TrayProvider';
+export { useTray } from './hooks/useTray';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default } from './Tray';
+export { TrayProvider } from './components/TrayProvider';
+export { useTray } from './hooks/useTray';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@synerise/ds-tray",
+  "version": "1.1.0",
+  "description": "Tray UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "types": "tsc --noEmit",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-button": "^1.4.9",
+    "@synerise/ds-icon": "^1.7.1",
+    "@synerise/ds-scrollbar": "^1.1.7",
+    "@synerise/ds-typography": "^1.0.19",
+    "@synerise/ds-utils": "^1.4.1"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "7f119fa17e645f1d800aea95c313fe22f348439c"
+}