@charcoal-ui/react 4.0.0-beta.2 → 4.0.0-beta.3

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

@@ -8,8 +8,16 @@ export type ButtonProps<T extends React.ElementType = 'button'> = {
     size?: Size;
     fullWidth?: boolean;
     isActive?: boolean;
+    /**
+     * The component used for root element.
+     * @type T extends React.ElementType = 'button'
+     */
     as?: T;
-} & Omit<React.ComponentPropsWithRef<T>, 'children'>;
+    /**
+     * The as property of the component specified by the Button component's as attribute.
+     */
+    componentAs?: React.ComponentPropsWithRef<T>['as'];
+} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>;
 declare const Button: <T extends React.ElementType<any> = "button">(p: ButtonProps<T>) => JSX.Element;
 export default Button;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,EAAgB,SAAS,EAAuB,MAAM,OAAO,CAAA;AAI3E,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAE1E,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAErB,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAA;AAEpD,QAAA,MAAM,MAAM,sEAyByD,WAAW,CAAA;AAChF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,EAAgB,SAAS,EAAuB,MAAM,OAAO,CAAA;AAI3E,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAE1E,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAErB,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAA;IACN;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;CACnD,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,CAAA;AAE3D,QAAA,MAAM,MAAM,sEA2ByD,WAAW,CAAA;AAChF,eAAe,MAAM,CAAA"}

package/dist/components/Button/index.story.d.ts

@@ -7,7 +7,8 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     fullWidth?: boolean | undefined;
     isActive?: boolean | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Omit<any, "children">>;
+    componentAs?: any;
+} & Omit<any, "children" | "as">>;
 export default _default;
 export declare const Default: StoryObj<typeof Button>;
 export declare const Primary: StoryObj<typeof Button>;
@@ -15,10 +16,7 @@ export declare const Navigation: StoryObj<typeof Button>;
 export declare const Overlay: StoryObj<typeof Button>;
 export declare const Danger: StoryObj<typeof Button>;
 export declare const Small: StoryObj<typeof Button>;
-export declare const Fixed: StoryObj<typeof Button>;
+export declare const FullWidth: StoryObj<typeof Button>;
 export declare const Disabled: StoryObj<typeof Button>;
-export declare const Active: StoryObj<typeof Button>;
-export declare const Link: StoryObj<typeof Button>;
-export declare const Nihongo: StoryObj<typeof Button>;
-export declare const Focus: StoryObj<typeof Button>;
+export declare const IsActive: StoryObj<typeof Button>;
 //# sourceMappingURL=index.story.d.ts.map

package/dist/components/Button/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,GAAG,CAAA;AACtB,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"}
+{"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/Button/index.test.d.ts

@@ -0,0 +1,2 @@
+import 'jest-styled-components';
+//# sourceMappingURL=index.test.d.ts.map

package/dist/components/Button/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.test.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA"}

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

@@ -18,5 +18,5 @@ export type DropdownSelectorProps = {
     children: MenuListChildren;
     onChange: (value: string) => void;
 };
-export default function DropdownSelector(props: DropdownSelectorProps): JSX.Element;
+export default function DropdownSelector({ onChange, ...props }: DropdownSelectorProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -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"}
+{"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

@@ -128,11 +128,12 @@ var Button = (0, import_react3.forwardRef)(function Button2({
   className,
   as,
   isActive,
+  componentAs,
   ...props
 }, ref) {
   const Component = (0, import_react3.useMemo)(() => as ?? "button", [as]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props, as: componentAs, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
 });
 var Button_default = Button;
 
@@ -1284,7 +1285,10 @@ var import_styled7 = require("@charcoal-ui/styled");
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
-function DropdownSelector(props) {
+function DropdownSelector({
+  onChange,
+  ...props
+}) {
   const triggerRef = (0, import_react21.useRef)(null);
   const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
@@ -1293,9 +1297,12 @@ function DropdownSelector(props) {
   const {
     visuallyHiddenProps
   } = (0, import_visually_hidden3.useVisuallyHidden)();
+  const handleChange = (0, import_react21.useCallback)((e) => {
+    onChange(e.target.value);
+  }, [onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
     props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__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) => {
+    /* @__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) => {
       return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
@@ -1307,7 +1314,7 @@ function DropdownSelector(props) {
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonIcon, { name: "16/Menu" })
     ] }),
     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) => {
-      props.onChange(v);
+      onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
     props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })