@telicent-oss/ds 0.9.1-rc3 → 0.10.0-rc3

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 (16) hide show
  1. package/README.md +1 -1
  2. package/dist/ds.js +10334 -10349
  3. package/dist/ds.umd.cjs +113 -118
  4. package/dist/src/test-utils.d.ts +1 -1
  5. package/dist/src/v1/components/inputs/Button/Button.d.ts +7 -2
  6. package/dist/src/v1/components/inputs/Button/Button.stories.d.ts +38 -2
  7. package/dist/src/v1/components/surfaces/FloatingPanel/DraggableFloatingPanel.d.ts +30 -1
  8. package/dist/src/v1/components/surfaces/FloatingPanel/FloatingPanelDockItem.d.ts +12 -1
  9. package/dist/src/v1/components/surfaces/FloatingPanel/FloatingPanelProvider.d.ts +1 -1
  10. package/dist/src/v1/components/surfaces/FloatingPanel/FloatingPanelToggleButton.d.ts +7 -1
  11. package/dist/src/v1/components/surfaces/FloatingPanel/__tests__/DraggableFloatingPanel.test.d.ts +1 -0
  12. package/dist/src/v1/components/surfaces/FloatingPanel/__tests__/FloatingPanelDockItem.test.d.ts +1 -0
  13. package/dist/src/v1/components/surfaces/FloatingPanel/__tests__/FloatingPanelToggleButton.test.d.ts +1 -0
  14. package/dist/src/v1/components/surfaces/FloatingPanel/useFloatingPanelContext.d.ts +1 -1
  15. package/dist/src/v1/components/surfaces/FloatingPanel/useFloatingPanels.d.ts +1 -1
  16. package/package.json +17 -18
package/dist/src/test-utils.d.ts CHANGED
@@ -3,7 +3,7 @@ import { RenderOptions } from '@testing-library/react';
3
3
  export declare const setup: (jsx: JSX.Element, options: RenderOptions) => {
4
4
  container: HTMLElement;
5
5
  baseElement: HTMLElement;
6
- debug: (baseElement?: Element | DocumentFragment | Array<Element | DocumentFragment>, maxLength?: number, options?: import('pretty-format').OptionsReceived) => void;
6
+ debug: (baseElement?: import('react-dom/client').Container | (Element | Document) | Array<import('react-dom/client').Container | (Element | Document)> | undefined, maxLength?: number | undefined, options?: import('pretty-format').OptionsReceived | undefined) => void;
7
7
  rerender: (ui: React.ReactNode) => void;
8
8
  unmount: () => void;
9
9
  asFragment: () => DocumentFragment;
package/dist/src/v1/components/inputs/Button/Button.d.ts CHANGED
@@ -1,12 +1,17 @@
1
1
  import { default as React } from 'react';
2
2
  import { ButtonProps as MUIButtonProps } from '@mui/material/Button';
3
3
 
4
- export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
4
+ export interface ButtonProps extends Omit<MUIButtonProps, "color" | "component" | "disabled" | "disableElevation" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant" | "sx" | "classes"> {
5
5
  /**
6
6
  * The color of the component.
7
7
  * @default 'primary'
8
8
  */
9
9
  color?: "primary" | "inherit";
10
+ /**
11
+ * The component used for the root node. Either a string to use a HTML element
12
+ * or a component.
13
+ */
14
+ component?: MUIButtonProps["component"];
10
15
  /**
11
16
  * If `true`, the component is disabled.
12
17
  * @default false
@@ -31,7 +36,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
31
36
  * `small` is equivalent to the dense button styling.
32
37
  * @default 'medium'
33
38
  */
34
- size?: MUIButtonProps['size'];
39
+ size?: MUIButtonProps["size"];
35
40
  /**
36
41
  * Element placed before the children.
37
42
  */
package/dist/src/v1/components/inputs/Button/Button.stories.d.ts CHANGED
@@ -17,6 +17,7 @@ declare const meta: {
17
17
  };
18
18
  decorators: (Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
19
19
  color?: ("primary" | "inherit") | undefined;
20
+ component?: import('@mui/material').ButtonProps["component"];
20
21
  disabled?: boolean | undefined;
21
22
  disableElevation?: boolean | undefined;
22
23
  endIcon?: import('react').ReactNode;
@@ -24,6 +25,7 @@ declare const meta: {
24
25
  size?: import('@mui/material').ButtonProps["size"];
25
26
  startIcon?: import('react').ReactNode;
26
27
  variant?: ("primary" | "secondary" | "tertiary" | "link" | "text") | undefined;
28
+ children?: import('react').ReactNode;
27
29
  defaultChecked?: boolean | undefined;
28
30
  defaultValue?: string | number | readonly string[] | undefined;
29
31
  suppressContentEditableWarning?: boolean | undefined;
@@ -44,7 +46,7 @@ declare const meta: {
44
46
  slot?: string | undefined;
45
47
  spellCheck?: (boolean | "true" | "false") | undefined;
46
48
  style?: import('react').CSSProperties | undefined;
47
- tabIndex?: number | undefined;
49
+ tabIndex?: NonNullable<import('react').HTMLAttributes<any>["tabIndex"]> | undefined;
48
50
  title?: string | undefined;
49
51
  translate?: "yes" | "no" | undefined;
50
52
  radioGroup?: string | undefined;
@@ -125,7 +127,6 @@ declare const meta: {
125
127
  "aria-valuemin"?: number | undefined;
126
128
  "aria-valuenow"?: number | undefined;
127
129
  "aria-valuetext"?: string | undefined;
128
- children?: import('react').ReactNode | undefined;
129
130
  dangerouslySetInnerHTML?: {
130
131
  __html: string | TrustedHTML;
131
132
  } | undefined;
@@ -289,6 +290,28 @@ declare const meta: {
289
290
  onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
290
291
  onTransitionEnd?: import('react').TransitionEventHandler<HTMLButtonElement> | undefined;
291
292
  onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLButtonElement> | undefined;
293
+ form?: string | undefined;
294
+ ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
295
+ key?: import('react').Key | null | undefined;
296
+ type?: "submit" | "reset" | "button" | undefined;
297
+ name?: string | undefined;
298
+ action?: import('react').Ref<import('@mui/material').ButtonBaseActions> | undefined;
299
+ centerRipple?: boolean | undefined;
300
+ disableRipple?: boolean | undefined;
301
+ disableTouchRipple?: boolean | undefined;
302
+ focusRipple?: boolean | undefined;
303
+ focusVisibleClassName?: string | undefined;
304
+ LinkComponent?: import('react').ElementType | undefined;
305
+ onFocusVisible?: import('react').FocusEventHandler<any> | undefined;
306
+ TouchRippleProps?: Partial<import('@mui/material/ButtonBase/TouchRipple').TouchRippleProps> | undefined;
307
+ touchRippleRef?: import('react').Ref<import('@mui/material/ButtonBase/TouchRipple').TouchRippleActions> | undefined;
308
+ value?: string | readonly string[] | number | undefined;
309
+ formAction?: string | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
310
+ formEncType?: string | undefined;
311
+ formMethod?: string | undefined;
312
+ formNoValidate?: boolean | undefined;
313
+ formTarget?: string | undefined;
314
+ disableFocusRipple?: boolean | undefined;
292
315
  }>) => import("@emotion/react/jsx-runtime").JSX.Element;
293
316
  };
294
317
  export default meta;
@@ -299,3 +322,16 @@ export declare const Tertiary: Story;
299
322
  export declare const Sizing: Story;
300
323
  export declare const WithIconsAndLabel: Story;
301
324
  export declare const FullWidth: Story;
325
+ /**
326
+ * Sometimes links should look like a button, but behave like links. Do this by
327
+ * using `<a>` tag or react-router-dom's `Link` component.
328
+ *
329
+ * To help assistive technologies,
330
+ * - avoid nesting interactive element e.g. `<button><a /></button>` or
331
+ * `<a><button /></a>`
332
+ * - set Button attributes like so:
333
+ * - `role` attribute to `undefined`
334
+ * - `component` (root element) to `div`
335
+ *
336
+ */
337
+ export declare const LinkButtons: Story;
package/dist/src/v1/components/surfaces/FloatingPanel/DraggableFloatingPanel.d.ts CHANGED
@@ -1,13 +1,42 @@
1
1
  import { default as React, HTMLAttributes } from 'react';
2
2
 
3
3
  interface DraggableFloatingPanelProps extends HTMLAttributes<HTMLDivElement> {
4
+ /**
5
+ * The id target reference for the toggle button.
6
+ */
4
7
  targetId: string;
8
+ /**
9
+ * Panel title.
10
+ */
5
11
  title: string;
12
+ /**
13
+ * Specifies movement boundaries. Accepted values:
14
+ *
15
+ * parent restricts movement
16
+ * within the node's offsetParent (nearest node with position relative or
17
+ * absolute), window, body, Selector like .fooClassName or Element.
18
+ */
6
19
  bounds?: "parent" | "window" | "body" | string | Element;
20
+ /**
21
+ * Total number of items
22
+ */
7
23
  count?: number;
24
+ /**
25
+ * Component content
26
+ */
8
27
  children?: React.ReactNode;
28
+ /**
29
+ * Specifies a selector to be used as the handle that initiates drag. Example:
30
+ * drag-handle.
31
+ */
32
+ dragHandleClassName?: string;
33
+ /**
34
+ * The icon to be displayed before the title
35
+ */
9
36
  icon?: React.ReactNode;
10
- visible?: boolean;
37
+ /**
38
+ * The x and y property is used to set the default position of the component.
39
+ */
11
40
  defaultPosition?: {
12
41
  x: number;
13
42
  y: number;
package/dist/src/v1/components/surfaces/FloatingPanel/FloatingPanelDockItem.d.ts CHANGED
@@ -1,11 +1,22 @@
1
1
  import { default as React, HTMLAttributes } from 'react';
2
2
 
3
3
  interface FloatingPanelItemProps extends HTMLAttributes<HTMLLIElement> {
4
+ /**
5
+ * The item label
6
+ */
4
7
  label: string;
8
+ /**
9
+ * The id target reference for the toggle button.
10
+ */
5
11
  targetId: string;
12
+ /**
13
+ * The icon to be displayed before the title
14
+ */
6
15
  icon?: React.ReactNode;
16
+ /**
17
+ * Total number of items
18
+ */
7
19
  count?: number;
8
- visible?: boolean;
9
20
  }
10
21
  declare const FloatingPanelItem: React.FC<FloatingPanelItemProps>;
11
22
  export default FloatingPanelItem;
package/dist/src/v1/components/surfaces/FloatingPanel/FloatingPanelProvider.d.ts CHANGED
@@ -10,7 +10,7 @@ type ToggleFn = (id: string) => void;
10
10
  type GetFn = (id: string, state: "visible" | "minimised") => boolean;
11
11
  interface FloatingPanelContextType {
12
12
  toggleVisibility: ToggleFn;
13
- toggleMinimized: ToggleFn;
13
+ toggleMinimised: ToggleFn;
14
14
  get: GetFn;
15
15
  panels: PanelsType;
16
16
  }
package/dist/src/v1/components/surfaces/FloatingPanel/FloatingPanelToggleButton.d.ts CHANGED
@@ -2,8 +2,14 @@ import { default as React } from 'react';
2
2
  import { ToggleButtonProps as MUIToggleButtonProps } from '@mui/material/ToggleButton';
3
3
 
4
4
  interface FloatingPanelToggleButtonProps extends Omit<MUIToggleButtonProps, "sx" | "classes" | "color" | "onClick" | "selected"> {
5
+ /**
6
+ * The unique identifier
7
+ */
5
8
  id: string;
6
- label: string;
9
+ /**
10
+ * Tooltip title
11
+ */
12
+ tooltip?: string;
7
13
  }
8
14
  declare const FloatingPanelToggleButton: React.FC<FloatingPanelToggleButtonProps>;
9
15
  export default FloatingPanelToggleButton;
package/dist/src/v1/components/surfaces/FloatingPanel/useFloatingPanelContext.d.ts CHANGED
@@ -2,4 +2,4 @@
2
2
  * Should be used to internal components only
3
3
  */
4
4
  declare const useFloatingPanelContext: () => import('./FloatingPanelProvider').FloatingPanelContextType;
5
- export default useFloatingPanelContext;
5
+ export { useFloatingPanelContext };
package/dist/src/v1/components/surfaces/FloatingPanel/useFloatingPanels.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  declare const useFloatingPanels: () => {
2
- panels: import('./FloatingPanelProvider').PanelsType;
2
+ panels: string[];
3
3
  };
4
4
  export default useFloatingPanels;
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "https://github.com/telicent-oss/telicent-ds.git"
8
8
  },
9
9
  "type": "module",
10
- "version": "0.9.1-rc3",
10
+ "version": "0.10.0-rc3",
11
11
  "private": false,
12
12
  "dependencies": {
13
13
  "@emotion/react": "^11.10.6",
@@ -31,7 +31,6 @@
31
31
  "zod": "^3.21.4"
32
32
  },
33
33
  "resolutions": {
34
- "jackspeak": "2.1.1",
35
34
  "nth-check": "^2.1.1",
36
35
  "prettier": "^2.8.8"
37
36
  },
@@ -80,18 +79,18 @@
80
79
  "@commitlint/cli": "17.1.2",
81
80
  "@commitlint/config-conventional": "^17.1.0",
82
81
  "@emotion/babel-plugin": "^11.12.0",
83
- "@storybook/addon-essentials": "8.3.0",
84
- "@storybook/addon-interactions": "8.3.0",
85
- "@storybook/addon-links": "8.3.0",
86
- "@storybook/addon-onboarding": "8.3.0",
87
- "@storybook/blocks": "8.3.0",
88
- "@storybook/react": "8.3.0",
89
- "@storybook/react-vite": "8.3.0",
90
- "@storybook/test": "8.3.0",
91
- "@testing-library/dom": "^9.2.0",
92
- "@testing-library/jest-dom": "^5.16.5",
93
- "@testing-library/react": "^14.0.0",
94
- "@testing-library/user-event": "^14.4.3",
82
+ "@storybook/addon-essentials": "8.4.0",
83
+ "@storybook/addon-interactions": "8.4.0",
84
+ "@storybook/addon-links": "8.4.0",
85
+ "@storybook/addon-onboarding": "8.4.0",
86
+ "@storybook/blocks": "8.4.0",
87
+ "@storybook/react": "8.4.0",
88
+ "@storybook/react-vite": "8.4.0",
89
+ "@storybook/test": "8.4.0",
90
+ "@testing-library/dom": "^10.4.0",
91
+ "@testing-library/jest-dom": "^6.6.3",
92
+ "@testing-library/react": "^16.0.1",
93
+ "@testing-library/user-event": "^14.5.2",
95
94
  "@types/d3": "^7.4.3",
96
95
  "@types/jest": "^29.5.0",
97
96
  "@types/node": "^18.15.11",
@@ -127,19 +126,19 @@
127
126
  "postcss": "^8.4.29",
128
127
  "postcss-cli": "^10.1.0",
129
128
  "postcss-import": "^15.1.0",
130
- "react": "^18.2.0",
131
- "react-dom": "^18.2.0",
129
+ "react": "18.2.0",
130
+ "react-dom": "18.2.0",
132
131
  "react-scripts": "5.0.0",
133
132
  "release-please": "15.6.0",
134
133
  "remark-gfm": "^3.0.1",
135
134
  "rollup": "^4.5.0",
136
135
  "rollup-plugin-copy": "^3.5.0",
137
- "storybook": "8.3.0",
136
+ "storybook": "8.4.0",
138
137
  "storybook-dark-mode": "^4.0.2",
139
138
  "tailwindcss": "^3.4.1",
140
139
  "typescript": "5.5.4",
141
140
  "typescript-plugin-css-modules": "^5.0.1",
142
- "vite": "^5.0.2",
141
+ "vite": "^5.4.10",
143
142
  "vite-plugin-dts": "^3.6.3",
144
143
  "vite-plugin-watch-and-run": "1.7.0"
145
144
  },