@seed-design/react 0.1.14 → 0.1.15

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 (6) hide show
  1. package/lib/components/Divider/Divider.cjs +14 -2
  2. package/lib/components/Divider/Divider.d.ts +9 -1
  3. package/lib/components/Divider/Divider.d.ts.map +1 -1
  4. package/lib/components/Divider/Divider.js +14 -2
  5. package/package.json +4 -4
  6. package/src/components/Divider/Divider.tsx +28 -3
package/lib/components/Divider/Divider.cjs CHANGED
@@ -27,16 +27,28 @@ function _interopNamespaceDefault(e) {
27
27
  const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
28
28
 
29
29
  const Divider = React__namespace.forwardRef((props, ref) => {
30
- const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
30
+ const {
31
+ as = "hr",
32
+ color = "stroke.neutral",
33
+ thickness = 1,
34
+ orientation = "horizontal",
35
+ role,
36
+ ...rest
37
+ } = props;
31
38
  return /* @__PURE__ */ jsxRuntime.jsx(
32
39
  Box.Box,
33
40
  {
34
41
  ref,
35
42
  as,
43
+ role,
44
+ ...(as === "hr" && orientation !== "horizontal" || as !== "hr" && role === "separator") && {
45
+ "aria-orientation": orientation
46
+ },
36
47
  display: "block",
37
48
  borderColor: color,
38
49
  borderWidth: 0,
39
- borderBottomWidth: thickness,
50
+ ...orientation === "vertical" && { borderRightWidth: thickness },
51
+ ...orientation === "horizontal" && { borderBottomWidth: thickness },
40
52
  ...rest
41
53
  }
42
54
  );
package/lib/components/Divider/Divider.d.ts CHANGED
@@ -2,9 +2,12 @@ import { BoxProps } from '../Box/Box';
2
2
  import * as React from "react";
3
3
  export interface DividerProps {
4
4
  /**
5
+ * The HTML element to use for the divider.
6
+ * Keep in mind that "hr" elements are read by screen readers as a semantic break with an implicit role="separator"
7
+ * If the element should be read by screen readers but be rendered as an element other than "hr", give an explicit role="separator"
5
8
  * @default "hr"
6
9
  */
7
- as?: "hr" | "div";
10
+ as?: "hr" | "div" | "li";
8
11
  /**
9
12
  * @default "stroke.neutral"
10
13
  */
@@ -13,6 +16,11 @@ export interface DividerProps {
13
16
  * @default 1
14
17
  */
15
18
  thickness?: BoxProps["borderBottomWidth"];
19
+ /**
20
+ * @default "horizontal"
21
+ */
22
+ orientation?: "horizontal" | "vertical";
23
+ role?: Extract<React.AriaRole, "separator">;
16
24
  }
17
25
  export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
18
26
  //# sourceMappingURL=Divider.d.ts.map
package/lib/components/Divider/Divider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,oFAclB,CAAC"}
1
+ {"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,OAAO,oFA6BlB,CAAC"}
package/lib/components/Divider/Divider.js CHANGED
@@ -4,16 +4,28 @@ import * as React from 'react';
4
4
  import { Box } from '../Box/Box.js';
5
5
 
6
6
  const Divider = React.forwardRef((props, ref) => {
7
- const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
7
+ const {
8
+ as = "hr",
9
+ color = "stroke.neutral",
10
+ thickness = 1,
11
+ orientation = "horizontal",
12
+ role,
13
+ ...rest
14
+ } = props;
8
15
  return /* @__PURE__ */ jsx(
9
16
  Box,
10
17
  {
11
18
  ref,
12
19
  as,
20
+ role,
21
+ ...(as === "hr" && orientation !== "horizontal" || as !== "hr" && role === "separator") && {
22
+ "aria-orientation": orientation
23
+ },
13
24
  display: "block",
14
25
  borderColor: color,
15
26
  borderWidth: 0,
16
- borderBottomWidth: thickness,
27
+ ...orientation === "vertical" && { borderRightWidth: thickness },
28
+ ...orientation === "horizontal" && { borderBottomWidth: thickness },
17
29
  ...rest
18
30
  }
19
31
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/react",
3
- "version": "0.1.14",
3
+ "version": "0.1.15",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -50,7 +50,7 @@
50
50
  "@seed-design/react-pull-to-refresh": "0.0.6",
51
51
  "@seed-design/react-radio-group": "0.0.4",
52
52
  "@seed-design/react-segmented-control": "0.0.5",
53
- "@seed-design/react-snackbar": "0.0.5",
53
+ "@seed-design/react-snackbar": "0.0.6",
54
54
  "@seed-design/react-switch": "0.0.4",
55
55
  "@seed-design/react-tabs": "0.0.8",
56
56
  "@seed-design/react-text-field": "0.0.4",
@@ -58,12 +58,12 @@
58
58
  "clsx": "^2.1.1"
59
59
  },
60
60
  "peerDependencies": {
61
- "@seed-design/css": "0.1.14",
61
+ "@seed-design/css": "0.1.15",
62
62
  "react": ">=18.0.0",
63
63
  "react-dom": ">=18.0.0"
64
64
  },
65
65
  "devDependencies": {
66
- "@seed-design/css": "0.1.14",
66
+ "@seed-design/css": "0.1.15",
67
67
  "@vitejs/plugin-react": "^5.0.0",
68
68
  "ajv": "^8.17.1",
69
69
  "globby": "^14.1.0",
package/src/components/Divider/Divider.tsx CHANGED
@@ -3,9 +3,12 @@ import { Box, type BoxProps } from "../Box/Box";
3
3
 
4
4
  export interface DividerProps {
5
5
  /**
6
+ * The HTML element to use for the divider.
7
+ * Keep in mind that "hr" elements are read by screen readers as a semantic break with an implicit role="separator"
8
+ * If the element should be read by screen readers but be rendered as an element other than "hr", give an explicit role="separator"
6
9
  * @default "hr"
7
10
  */
8
- as?: "hr" | "div";
11
+ as?: "hr" | "div" | "li";
9
12
 
10
13
  /**
11
14
  * @default "stroke.neutral"
@@ -16,19 +19,41 @@ export interface DividerProps {
16
19
  * @default 1
17
20
  */
18
21
  thickness?: BoxProps["borderBottomWidth"];
22
+
23
+ /**
24
+ * @default "horizontal"
25
+ */
26
+ orientation?: "horizontal" | "vertical";
27
+
28
+ role?: Extract<React.AriaRole, "separator">;
19
29
  }
20
30
 
21
31
  export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
22
- const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
32
+ const {
33
+ as = "hr",
34
+ color = "stroke.neutral",
35
+ thickness = 1,
36
+ orientation = "horizontal",
37
+ role,
38
+ ...rest
39
+ } = props;
23
40
 
24
41
  return (
25
42
  <Box
26
43
  ref={ref}
27
44
  as={as}
45
+ role={role}
46
+ // if hr, aria-orientation=horizontal is implied if not specified
47
+ // if not hr, aria-orientation is needed
48
+ {...(((as === "hr" && orientation !== "horizontal") ||
49
+ (as !== "hr" && role === "separator")) && {
50
+ "aria-orientation": orientation,
51
+ })}
28
52
  display="block"
29
53
  borderColor={color}
30
54
  borderWidth={0}
31
- borderBottomWidth={thickness}
55
+ {...(orientation === "vertical" && { borderRightWidth: thickness })}
56
+ {...(orientation === "horizontal" && { borderBottomWidth: thickness })}
32
57
  {...rest}
33
58
  />
34
59
  );