@charcoal-ui/react 3.10.1-beta.1 → 3.10.1

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 (14) hide show
  1. package/dist/components/Button/index.story.d.ts +4 -9
  2. package/dist/components/Button/index.story.d.ts.map +1 -1
  3. package/dist/components/DropdownSelector/index.d.ts +1 -1
  4. package/dist/components/DropdownSelector/index.d.ts.map +1 -1
  5. package/dist/index.cjs.js +9 -3
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.esm.js +13 -7
  8. package/dist/index.esm.js.map +1 -1
  9. package/package.json +7 -7
  10. package/src/components/Button/__snapshots__/index.story.storyshot +91 -939
  11. package/src/components/Button/index.story.tsx +14 -161
  12. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +15 -0
  13. package/src/components/DropdownSelector/index.tsx +19 -4
  14. package/src/components/Modal/__snapshots__/index.story.storyshot +2 -0
package/dist/components/Button/index.story.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { ClickableElement } from '../Clickable';
2
- import Button, { ButtonProps } from '.';
1
+ import Button from '.';
3
2
  import { StoryObj } from '@storybook/react';
4
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ButtonProps & import("react").RefAttributes<ClickableElement>>;
3
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").ButtonProps & import("react").RefAttributes<import("../Clickable").ClickableElement>>;
5
4
  export default _default;
6
5
  export declare const Default: StoryObj<typeof Button>;
7
6
  export declare const Primary: StoryObj<typeof Button>;
@@ -9,11 +8,7 @@ export declare const Navigation: StoryObj<typeof Button>;
9
8
  export declare const Overlay: StoryObj<typeof Button>;
10
9
  export declare const Danger: StoryObj<typeof Button>;
11
10
  export declare const Small: StoryObj<typeof Button>;
12
- export declare const Fixed: StoryObj<typeof Button>;
11
+ export declare const FullWidth: StoryObj<typeof Button>;
13
12
  export declare const Disabled: StoryObj<typeof Button>;
14
- export declare const Active: StoryObj<typeof Button>;
15
- export declare const Link: StoryObj<typeof Button>;
16
- export declare const Nihongo: StoryObj<typeof Button>;
17
- export declare const Focus: StoryObj<typeof Button>;
18
- export declare const LayoutExample: StoryObj<typeof Button>;
13
+ export declare const IsActive: StoryObj<typeof Button>;
19
14
  //# sourceMappingURL=index.story.d.ts.map
package/dist/components/Button/index.story.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,GAAG,CAAA;AACvC,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAEjD,wBAkBwB;AAExB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAAM,CAAA;AAElD,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAI3C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,MAAM,CAI9C,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAI3C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,OAAO,MAAM,CAI1C,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,MAAM,CAIzC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,MAAM,CAIzC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,MAAM,CAI5C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,OAAO,MAAM,CAI1C,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,OAAO,MAAM,CAIxC,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE3C,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,MAAM,CAUzC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,OAAO,MAAM,CA4FjD,CAAA"}
1
+ {"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,GAAG,CAAA;AACtB,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAEjD,wBAGwB;AAExB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE3C,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE3C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE9C,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE3C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE1C,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,MAAM,CAEzC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE7C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE5C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,MAAM,CAE5C,CAAA"}
package/dist/components/DropdownSelector/index.d.ts CHANGED
@@ -18,5 +18,5 @@ export type DropdownSelectorProps = {
18
18
  children: MenuListChildren;
19
19
  onChange: (value: string) => void;
20
20
  };
21
- export default function DropdownSelector(props: DropdownSelectorProps): JSX.Element;
21
+ export default function DropdownSelector({ onChange, ...props }: DropdownSelectorProps): JSX.Element;
22
22
  //# sourceMappingURL=index.d.ts.map
package/dist/components/DropdownSelector/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAA;AAO5D,OAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAgFpE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAA0C,MAAM,OAAO,CAAA;AAOhF,OAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,eA4FvB"}
package/dist/index.cjs.js CHANGED
@@ -1327,7 +1327,10 @@ var import_styled8 = require("@charcoal-ui/styled");
1327
1327
  var import_visually_hidden3 = require("@react-aria/visually-hidden");
1328
1328
  var import_jsx_runtime20 = require("react/jsx-runtime");
1329
1329
  var defaultRequiredText = "*\u5FC5\u9808";
1330
- function DropdownSelector(props) {
1330
+ function DropdownSelector({
1331
+ onChange,
1332
+ ...props
1333
+ }) {
1331
1334
  const triggerRef = (0, import_react20.useRef)(null);
1332
1335
  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
1333
1336
  const preview = findPreviewRecursive(props.children, props.value);
@@ -1336,9 +1339,12 @@ function DropdownSelector(props) {
1336
1339
  const {
1337
1340
  visuallyHiddenProps
1338
1341
  } = (0, import_visually_hidden3.useVisuallyHidden)();
1342
+ const handleChange = (0, import_react20.useCallback)((e) => {
1343
+ onChange(e.target.value);
1344
+ }, [onChange]);
1339
1345
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
1340
1346
  props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
1341
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("select", { name: props.name, value: props.value, tabIndex: -1, children: propsArray.map((itemProps) => {
1347
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
1342
1348
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
1343
1349
  }) }) }),
1344
1350
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
@@ -1350,7 +1356,7 @@ function DropdownSelector(props) {
1350
1356
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonIcon, { name: "16/Menu" })
1351
1357
  ] }),
1352
1358
  isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuList, { value: props.value, onChange: (v) => {
1353
- props.onChange(v);
1359
+ onChange(v);
1354
1360
  setIsOpen(false);
1355
1361
  }, children: props.children }) }),
1356
1362
  props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })