@box/blueprint-web 12.17.2 → 12.18.0

package/dist/lib-esm/index.css

@@ -6908,6 +6908,147 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   background:var(--surface-toggletext-surface-on-pressed);
   border-color:var(--border-toggletext-border-on-pressed);
 }
+
+.bp_time_picker_module_timePicker--7ed90{
+  --time-picker-padding-right:var(--space-4);
+  --time-picker-border-width:var(--border-2);
+  --time-picker-focused-border-color:var(--outline-focus-on-light);
+  --clear-time-picker-button-right:var(--size-11);
+  --time-picker-icon-button-size:var(--size-6);
+  --time-picker-icon-size:var(--size-4);
+  width:100%;
+}
+.bp_time_picker_module_timePicker--7ed90.bp_time_picker_module_disabled--7ed90{
+  opacity:60%;
+  pointer-events:none;
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_label--7ed90{
+  cursor:default;
+  display:block;
+  font-family:var(--body-default-bold-font-family);
+  font-size:var(--body-default-bold-font-size);
+  font-weight:var(--body-default-bold-font-weight);
+  letter-spacing:var(--body-default-bold-letter-spacing);
+  line-height:var(--body-default-bold-line-height);
+  margin-block-end:var(--space-2);
+  -webkit-text-decoration:var(--body-default-bold-text-decoration);
+          text-decoration:var(--body-default-bold-text-decoration);
+  text-transform:var(--body-default-bold-text-case);
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_group--7ed90{
+  align-items:center;
+  border-radius:var(--radius-2);
+  box-shadow:var(--innershadow-1);
+  box-sizing:border-box;
+  display:inline-flex;
+  font-family:var(--body-default-font-family);
+  font-size:var(--body-default-font-size);
+  font-weight:var(--body-default-font-weight);
+  letter-spacing:var(--body-default-letter-spacing);
+  line-height:var(--body-default-line-height);
+  outline:var(--border-1) solid var(--border-input-border);
+  padding-inline:var(--space-3) var(--time-picker-padding-right);
+  position:relative;
+  -webkit-text-decoration:var(--body-default-text-decoration);
+          text-decoration:var(--body-default-text-decoration);
+  text-transform:var(--body-default-text-case);
+  width:100%;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_group--7ed90:focus-within{
+  outline:var(--time-picker-border-width) solid var(--time-picker-focused-border-color);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_group--7ed90.bp_time_picker_module_error--7ed90:not(:focus-within){
+  outline:var(--time-picker-border-width) solid var(--text-text-error-on-light);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_group--7ed90.bp_time_picker_module_error--7ed90:focus-within{
+  outline:var(--time-picker-border-width) solid var(--time-picker-focused-border-color);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInput--7ed90{
+  align-items:center;
+  display:inline-flex;
+  height:var(--size-10);
+  margin-inline-end:calc(var(--time-picker-icon-button-size) + var(--clear-time-picker-button-right));
+  text-transform:uppercase;
+  white-space:nowrap;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90{
+  border:unset;
+  border-radius:unset;
+  border-radius:var(--radius-1);
+  box-shadow:unset;
+  color:var(--text-text-on-light);
+  height:-moz-fit-content;
+  height:fit-content;
+  padding:unset;
+  transition:unset;
+  width:unset;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90[data-placeholder]{
+  color:var(--text-text-on-light-secondary);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90[role=spinbutton]{
+  margin:0 var(--space-05);
+  padding:0 var(--space-1);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90:active,.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90:focus{
+  background:var(--box-blue-100);
+  caret-color:#0000;
+  color:var(--text-text-brand-on-color);
+  outline:none;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90:nth-child(1 of [role=spinbutton]){
+  margin-inline-start:0;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90[data-type=literal] + [data-type=dayPeriod]{
+  margin-inline-start:calc(var(--space-1)*-1);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90{
+  align-items:center;
+  background-color:initial;
+  border:none;
+  border-radius:var(--radius-2);
+  cursor:pointer;
+  display:flex;
+  height:var(--time-picker-icon-button-size);
+  justify-content:center;
+  outline:none;
+  padding:0;
+  position:absolute;
+  right:var(--clear-time-picker-button-right);
+  width:var(--time-picker-icon-button-size);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:focus-visible,.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90[data-focus-visible]{
+  background-color:var(--surface-cta-surface-icon-pressed);
+  outline:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:hover{
+  background:var(--surface-cta-surface-icon-hover);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:hover *{
+  fill:var(--icon-cta-icon-hover);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:active{
+  background:var(--surface-cta-surface-icon-pressed);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:active *{
+  fill:var(--icon-cta-icon-pressed);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:disabled{
+  opacity:1;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clockIcon--7ed90{
+  height:var(--time-picker-icon-size);
+  position:absolute;
+  right:var(--time-picker-padding-right);
+  width:var(--time-picker-icon-size);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_inlineError--7ed90{
+  margin-block-start:var(--space-2);
+}
 :root{
   --surface-surface-brand:#0061d5;
   --surface-surface-brand-hover:#006ae9;

package/dist/lib-esm/index.d.ts

@@ -67,6 +67,7 @@ export * from './text-area';
 export * from './text-button';
 export * from './text-input';
 export * from './text-toggle-button';
+export * from './time-picker';
 export * from './toolbar';
 export * from './tooltip';
 export * from './trigger-button';

package/dist/lib-esm/index.js

@@ -85,6 +85,7 @@ export { TextArea } from './text-area/text-area.js';
 export { TextButton } from './text-button/text-button.js';
 export { TextInput } from './text-input/text-input.js';
 export { TextToggleButton } from './text-toggle-button/text-toggle-button.js';
+export { TimePicker } from './time-picker/time-picker.js';
 export { Toolbar } from './toolbar/index.js';
 export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
 export { TriggerButton } from './trigger-button/trigger-button.js';

package/dist/lib-esm/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './time-picker';
+export { type TimePickerProps, type TimePickerTime } from './types';

package/dist/lib-esm/time-picker/time-picker.d.ts

@@ -0,0 +1,2 @@
+import { type TimePickerProps } from './types';
+export declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/time-picker/time-picker.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ClockBadge, XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { Gray65, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, useRef, useCallback } from 'react';
+import { TimeField, Group, DateInput, DateSegment } from 'react-aria-components';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { useControllableState } from '../utils/useControllableState.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './time-picker.module.js';
+
+const ClearIcon = label => () => jsx(XMark, {
+  "aria-label": label,
+  color: Gray65,
+  height: Size4,
+  width: Size4
+});
+const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    onChange,
+    value,
+    defaultValue,
+    label,
+    error,
+    isDisabled,
+    hideLabel = false,
+    clearTimePickerAriaLabel,
+    clockIconAriaLabel,
+    shouldForceLeadingZeros = true,
+    ...rest
+  } = props;
+  // Component may be uncontrolled or controlled
+  const [time, setTimeValue] = useControllableState({
+    prop: value,
+    onChange,
+    defaultProp: defaultValue
+  });
+  const firstSegmentRef = useRef(null);
+  const handleClearInputButtonClicked = useCallback(() => {
+    setTimeValue(null);
+  }, [setTimeValue]);
+  const handleClearButtonKeypress = useCallback(({
+    key
+  }) => {
+    if ([' ', 'Enter'].includes(key)) {
+      handleClearInputButtonClicked();
+      firstSegmentRef.current?.focus();
+    }
+  }, [handleClearInputButtonClicked]);
+  const inlineErrorId = useUniqueId('inline-error-');
+  const Label = useLabelable(label, useUniqueId('time-picker-'));
+  const hasError = !!error && !isDisabled;
+  const ariaDescribedBy = clsx(rest['aria-describedby'], {
+    [inlineErrorId]: hasError
+  });
+  return jsxs(TimeField, {
+    ...rest,
+    ref: forwardedRef,
+    "aria-describedby": ariaDescribedBy,
+    className: clsx(styles.timePicker, {
+      [styles.disabled]: isDisabled
+    }, className),
+    isDisabled: isDisabled,
+    isInvalid: hasError,
+    onChange: setTimeValue,
+    shouldForceLeadingZeros: shouldForceLeadingZeros,
+    value: time,
+    children: [jsx(Label, {
+      className: clsx(styles.label, {
+        [styles.disabled]: isDisabled
+      }),
+      hideLabel: hideLabel
+    }), jsxs(Group, {
+      className: clsx(styles.group, {
+        [styles.error]: hasError
+      }),
+      children: [jsx(DateInput, {
+        className: clsx(styles.timeInput),
+        children: segment => jsx(DateSegment, {
+          ref: node => {
+            // We need to find the first actionable segment, i.e. spinbutton
+            if (!firstSegmentRef.current && node.role === 'spinbutton') {
+              firstSegmentRef.current = node;
+            }
+          },
+          className: styles.timeInputSegment,
+          segment: segment
+        })
+      }), (value || time) && jsx(IconButton, {
+        "aria-label": clearTimePickerAriaLabel,
+        className: styles.clearButton,
+        disabled: isDisabled,
+        icon: ClearIcon(clearTimePickerAriaLabel),
+        onClick: handleClearInputButtonClicked,
+        onKeyDownCapture: handleClearButtonKeypress,
+        size: "x-small"
+      }), jsx(ClockBadge, {
+        "aria-label": clockIconAriaLabel,
+        className: styles.clockIcon,
+        color: Gray65,
+        height: Size4,
+        width: Size4
+      })]
+    }), jsx(InlineError, {
+      className: styles.inlineError,
+      id: inlineErrorId,
+      children: error
+    })]
+  });
+});
+
+export { TimePicker };

package/dist/lib-esm/time-picker/time-picker.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"timePicker":"bp_time_picker_module_timePicker--7ed90","disabled":"bp_time_picker_module_disabled--7ed90","label":"bp_time_picker_module_label--7ed90","group":"bp_time_picker_module_group--7ed90","error":"bp_time_picker_module_error--7ed90","timeInput":"bp_time_picker_module_timeInput--7ed90","timeInputSegment":"bp_time_picker_module_timeInputSegment--7ed90","clearButton":"bp_time_picker_module_clearButton--7ed90","clockIcon":"bp_time_picker_module_clockIcon--7ed90","inlineError":"bp_time_picker_module_inlineError--7ed90"};
+
+export { styles as default };

package/dist/lib-esm/time-picker/types.d.ts

@@ -0,0 +1,24 @@
+import { type Time } from '@internationalized/date';
+import { type TimeFieldProps as RACTimeFieldProps } from 'react-aria-components';
+import { type Labelable } from '../util-components/labelable';
+export type { Time as TimePickerTime };
+export interface TimePickerProps extends Omit<RACTimeFieldProps<Time>, 'children'>, Labelable {
+    /**
+     * When `true`, label text is hidden.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Aria label for button clearing TimePicker input
+     */
+    clearTimePickerAriaLabel: string;
+    /**
+     * Aria label for clock icon
+     */
+    clockIconAriaLabel: string;
+    /**
+     * The content of the error message.
+     */
+    error?: React.ReactNode;
+}

package/dist/lib-esm/utils/useCallbackRef.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-// copy of radix hook: https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+// copy of radix hook: https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/use-callback-ref.tsx
 /**
  * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
  * prop or avoid re-executing effects when passed as a dependency

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.17.2",
+    "version": "12.18.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {